Show message to jquery validation with Ajax.BeginForm Asp.Net MVC

Question

I have tested jquery validate with Ajax.BeginForm from asp.net mvc and although the form validate, the error message is not displayed if the form is not valid.

FORM CODE:

@using (Ajax.BeginForm("Save", "Student", null,
    new AjaxOptions { HttpMethod = "POST", OnSuccess = "StudentSucess", OnFailure = "StudentFail", OnBegin = "validateForm", },
    new { id = "form-student" }))
{
    <div class="form-group">
        <input type="hidden" class="form-control" id="Id" name="Id" />
    </div>
    <div class="form-group">
        <label>TESTE</label>
        <select name="Test" required="" class="form-control">
            <option value="">Select</option>
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="Name" name="Name" placeholder="Name" autocomplete="off" required="" />
    </div>
    <div class="form-group m-t-10">
        <button type="submit" class="btn btn-theme">Create</button>
    </div>
}

VALIDATE FUNCTION CODE

function validateForm() {
            var valid = $("#form-student").validate({
                rules: {
                    Name: {
                        required: true
                    },
                    Test: {
                        required: true
                    },
                },
                messages: {
                    Name: {
                        required: "Your name is required"
                    },
                    Test: {
                        required: "Test is required"
                    },
                }
            });

            return valid;
        }

IMAGE OF VALIDATION

I need the message of the respective validated field to be displayed.

IMPORTANT: A stackoverflow user tagged that same question as a duplicate, and the question was different from the one he said was duplicated, does not solve that problem. I tried all the solutions of the comments, but they did not work for me.

Are the HTML5 required attributes interfering? You already state there that both fields are required (required=""). Probably this causes the browser to not fire the click on the submit button. To test this, simple remove the attributes. — Felix
– Felix, Commented Nov 7, 2018 at 12:21
@Felix Wow, that was the problem. Validation has now worked. Thank you very much. — Leomar de Souza
– Leomar de Souza, Commented Nov 7, 2018 at 12:26
just call $("#form-student").validate({....}) outside the validateForm() method — shajji
– shajji, Commented Nov 7, 2018 at 12:28

Felix · Accepted Answer · 2018-11-07 19:27:04Z

2

The code of the OP has two issues, which I'll point out separately.

1) Wrong initialisation of the jQuery Validation plugin (pointed out by @Sparky in the comments)

The recommended usage of the jQuery Validation plugin is to call the .validate function after the page has been loaded and not with the onsubmit event handler.

<form id="myForm">
<input type="text" required="required">
</form>
<script>
$(document).ready(function() {
    $("#myform").validate();
});
</script>

See https://jsfiddle.net/eky1rgjb/

This is the solution I personally would recommend.

2nd) The event handler "onsubmit" won't fire when the HTML5 validation fails.

This is a more general solution. If you want your (custom) validation to be fired with the onsubmit event handler, you need to know that the function will only be called if there are no HTML5 validations preventing the submission.

<b>This form WON'T fire the validation</b>
<form onsubmit='alert("validation")'>
    <input name="foo" type="text" required="">
    <br />
    <input type="submit" />
</form>
<b>This form WILL fire the validation, see the missing required=""</b>
<form onsubmit='alert("validation")'>
    <input name="foo" type="text">
    <br />
    <input type="submit" />
</form>

See https://jsfiddle.net/0v253wz6/2/

edited Nov 7, 2018 at 19:27

answered Nov 7, 2018 at 12:28

Felix

5751 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sparky Over a year ago

The jQuery Validate plugin works perfectly fine with HTML5 attributes, so this one-sentence answer, without any additional explanation, is false by itself. It would be helpful for you to explain why your answer would work for the OP's particular installation and framework. See: jsfiddle.net/eky1rgjb

Felix Over a year ago

I'll update the answer. See the adjusted Fiddle (jsfiddle.net/0v253wz6). You are using "on document ready", OP is using "on form submit".

Sparky Over a year ago

Your new jsFiddle does not call .validate() anyplace! Without calling .validate(), you're not initializing jQuery Validate, so you're not even using the jQuery Validate plugin. And the OP should not be using "on form submit" since the jQuery Validate plugin automatically captures the submit event when the plugin is properly initialized.

Felix Over a year ago

My fiddle demonstrates that the onsubmit event handler does not fire when the html5 validation fails. I'm confident that you could solve this problem with several workarounds like implementing the validation into the global Ajax functions. But the question was why his/her messages won't show -> because the html5 validation prevents the function call.

Sparky Over a year ago

Right, but he should absolutely NOT be calling .validate() on the submit event in the first place. If he initializes this plugin properly, which is by calling .validate() on page load, then HTML5 attributes would not matter at all... in fact, this plugin is designed to leverage the HTML5 attributes into declarations of its own rules.

|

Collectives™ on Stack Overflow

Show message to jquery validation with Ajax.BeginForm Asp.Net MVC

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related