How to Remove Client-Side Validation on a textboxfor for multiple emails?

Question

I am creating an MVC application in which I will have an input field for a list of emails. In order to do so, I added multiple in order to allow for the user to enter a comma separated list of emails. By doing it this way, I'm able to have input controls to check for the email(s) to be properly formatted (".+@gmail.com").

The problem is that when I test this, it automatically adds class="input-validation-error" (even if I set the @class="" prior) and will not allow me to post due to an invalid input, as a result. Is there any way to allow for this, or is my only option to make it an Email string property and parse it by commas into the EmailList property in the controller?

(Here is my code):

View:

@Html.TextBoxFor(model => model.EmailList, new { type = "email", placeholder 
= "ex@gmail.com (',' Delimited)", title = "Make sure your email(s) are 
formatted appropriately (and comma separated).", multiple = "" })

Model:

public List<string> EmailList { get; set; }

UPDATE:

I should also add that I am performing json serialization on post, so It needs to be in the form of a list. Ideally, I would be able to use the multiple for the input of type email tag, since it would allow for the necessary input controls that I would need without making me take it as a string and writing it to a list.

A `List` property makes no sense for you input, and will never bind (you posting back a single string, not a collection of strings. — , Sep 24 '18 at 21:59
The emails will be part of a JSON file, attached to an associated ticket, which will be part of an automated process in which they need to be in list form (assuming there is more than one email). But given that, should I just have the input assign to a string which would then be split into and assigned to a property of a list of strings (prior to being serialized to JSON)? — C Murphy, Sep 25 '18 at 12:50

kblau · Answer 1 · 2018-09-24T20:32:49.007

https://dotnetfiddle.net/eadTjh

View

@model Testy20161006.Controllers.MurphyModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut122</title>
</head>
<body>
    @if (ViewBag.Output != null)
    {
        <span>@ViewBag.Output</span>
    }
    @using (Html.BeginForm())
    {
        @Html.TextBoxFor(model => model.EmailList, new
        {
            type = "email",
            placeholder = "ex@gmail.com (',' Delimited)",
            title = "Make sure your email(s) are formatted appropriately (and comma separated).",
            multiple = ""
        })
        <input type="submit" value="submit" />
    }
</body>
</html>

Controller/View Model

namespace Testy20161006.Controllers
{
public class MurphyModel
{
    //We don't want a list class, rather a string 
    public string EmailList { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Tut122(MurphyModel model)
    {
        var splitEmails = model.EmailList.Split(',');
        var anEmail = "These are the different emails: ";
        foreach (string email in splitEmails)
        {
            //set breakpoint here
            anEmail+= email + " and ";
        }
        anEmail = anEmail.Substring(0, anEmail.Length - 5);
        ViewBag.Output = anEmail;
        return View(model);        }

    public ActionResult Tut122()
    {
        MurphyModel model = new MurphyModel();
        return View(model);
    }

Thanks, @kblau, This solves my issue surrounding input controls. But does this mean that there is no way to have it as a list to begin with? I need the emails in a list in order for it to be properly formatted for when I serialize them into a json file. — C Murphy, Sep 24 '18 at 20:57
@C Murphy adding another post that uses a List for a property — kblau, Sep 25 '18 at 21:29

score 0 · Answer 2 · answered Sep 24 '18 at 20:44

0

add a js file hopefully u use jQuery

$(document).ready(function () {
    $("#EmailList").removeClass("input-validation-error");

});

answered Sep 24 '18 at 20:44

China Syndrome

953
12
24

Hi @China Syndrome, I tried this and it still will not remove the underlying validation or let me post. – C Murphy Sep 24 '18 at 21:06

score 0 · Answer 3 · answered Sep 25 '18 at 15:00

0

After Reviewing kblau's answer, I realized that was partially the reason. The other issue that I was running into (where MVC was stepping over any of my manually entered client-side validation) was the result of the unobtrusive validation:

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

After commenting this out, it allowed for me to have the input write to a string Email which I would then assign to a list of strings EmailList in the controller. This ended up working for me.

answered Sep 25 '18 at 15:00

C Murphy

47
1
13

You do realize that removing this script has removed any unobtrusive validation that is added by the model? If you used `html.textbox` instead of `html.textboxfor` the HTML helper would not be referencing the model to automagically generate the validation for you. Seems like you just killed a fly with a pound of C4. – Steve0 Sep 25 '18 at 22:34
Yes, I understand this. I never intended to use MVC razor because I wanted it to automatically generate validation for me, so I'm fine with manually generating it. Especially if that automatic validation is not working as it should. – C Murphy Sep 26 '18 at 13:29

score 0 · Accepted Answer · answered Sep 25 '18 at 21:30

The new fiddle is here, click on it https://dotnetfiddle.net/ORYDVJ

View

@model Testy20161006.Controllers.MurphyModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut122</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#emailField").change(function () {
                var theList = {
                    emaillist: []
                };
                var array = $('#emailField').val().split(",");
                $.each(array, function (i) {
                    theList.emaillist.push(
                        array[i]
                    );
                });
                $.ajax({
                    url: '/Home/Tut122',
                    traditional: true,
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({ murphyModel: theList }),
                    success: function (data) {
                        console.log('success!!');
                        $("#theOutput").html(data)
                    }
                });
            })
        })
    </script>
</head>
<body>
    @Html.TextBoxFor(model => model.EmailList, new
            {
                id = "emailField",
                type = "email",
                placeholder = "ex@gmail.com (',' Delimited)",
                title = "Make sure your email(s) are formatted appropriately (and comma separated).",
                multiple = ""
            })
    <span>The output data:</span>
    <div id="theOutput">
    </div>
</body>
</html>

Controller/View Model

public class MurphyModel
{
    public List<string> EmailList { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public string Tut122(MurphyModel murphyModel)
    {
        //You need to get Newtonsoft.JSON
        var json = JsonConvert.SerializeObject(murphyModel);
        return json;
    }

    public ActionResult Tut122()
    {
        MurphyModel model = new MurphyModel();
        return View(model);
    }

How to Remove Client-Side Validation on a textboxfor for multiple emails?

4 Answers4