How to stop Form submit if the validation fails
Solution 1
I able to fixed the problem:
First add the ref on your page:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
then do this check:
$("form").submit(function () {
if ($(this).valid()) { //<<< I was missing this check
$("#loading").show();
}
});
Solution 2
You need to do two things if validation fails, e.preventDefault() and to return false.
For your example, with the input given, the pseudo code might be the next:
$("form").submit(function (e) {
var validationFailed = false;
// do your validation here ...
if (validationFailed) {
e.preventDefault();
return false;
}
});
Solution 3
Write your validation code on onsubmit handler of your form like this
<form onsubmit="return Validation()">
<input class="form-control" data-val="true" id="SerialNumber" name="SerialNumber" required="required" type="text">
<button type="submit" name="rsubmit" class="btn btn-success">Submit</button>
<script>
function Validation(){
//Do all your validation here
//Return true if validation is successful, false if not successful
//It will not submit in case of false.
return true or false;
}
</script>
</form>
Comments
-
Nick Kahn almost 2 years
UPDATE: my question is more about
How to prevent the form submit if the validation fails
the link does not solve my problem
just re-iterate what I'm doing: I have a form with bunch of input fields and when the user hit the submit button it validate form using attribute
required="required"
if the form validation fails THEN I want to stop submitting the form as you see the javascript it show the div when the user submit the form.Hope this clears up.
END UPDATE
How can I stop the form submit to fire if the form validation fails?
<input class="form-control" data-val="true" id="SerialNumber" name="SerialNumber" required="required" type="text"> <button type="submit" name="rsubmit" class="btn btn-success">Submit</button> //loading message: $("form").submit(function (e) { $("#loading").show(); });
-
Farside about 8 yearsit's not good approach. You have to prevent the form submit, not the click on the button. If you'll press ENTER - the form will be submitted outside of your handlers.
-
Farside about 8 yearswhy so complicated? why to use both jquery.validate and jquery.validate.unobtrusive ?
-
Nick Kahn about 8 yearswhat do you mean by complicated? you mean i can use any one of the .js ?
-
Cheezy Code about 8 yearsYes good point. I have changed my code slightly to consider your case.
-
Farside about 8 yearsno, I just don't know your context, may be you need it for some reason. I'd say with the data given - you don't need it.
-
PatPeter over 4 yearsThis is exactly what I needed. My code has been broken for weeks and users submitting invalid data. I was using this stupid check:
if (!this.checkValidity() || !this.reportValidity())
. -
Davy over 3 yearsSimplification: script "jquery.validate.unobtrusive.min.js" is not required, "jquery.validate.js" is sufficient
-
Primoshenko about 2 yearsThis really works. Thanks!