Html.BeginForm using onSubmit to validate

Question

I am trying to submit my form, however I added some jquery for validation, which works:

$(function validateForm() { $("#newMonoReading").on('focusout', function () { var str = ""; var initialMonoReading = $('#InitialMonoReading').val(); var newMonoReading = $('#newMonoReading').val() if (~~newMonoReading < ~~initialMonoReading) { $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing"); $('#MonoErrorMessage').show(); return false; } else { $('#MonoErrorMessage').hide(); } }); }); 

But the problem is the submit button

  <input type="submit" value="Submit" class="btn btn-primary"> 

If there is an error, the submit button is still working, I need it to not display error messages and then send them, but I tried using onsubmit for the form, but it doesn’t work, it still submits, although the value is lower and a message appears about the error.

This is html.BeginForm. I think the error may be here. I'm not sure.

  <div class="modal-body"> @using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "validateForm()" })) { 

Any ideas

Answer 1

If I'm right, then on submit you want to check your form using the jquery .. function and if vailidation is passed, then you want the submit to indicate that you want the feed to be canceled. If I am mistaken, please clarify your question a little more.

Otherwise, you can change the jquery function to -

 $(function validateForm(event) { event = event || window.event || event.srcElement; var initialMonoReading = $('#InitialMonoReading').val(); var newMonoReading = $('#newMonoReading').val() if (~~newMonoReading < ~~initialMonoReading) { $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing"); $('#MonoErrorMessage').show(); event.preventDefault(); } else { $('#MonoErrorMessage').hide(); } }); 

and when creating markup use the following line -

 @using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "validateForm(event)" })) 

Although, I did not check your code, but it should work .. Try and let us know ..

Answer 2

It worked for me

 function validateForm() { if ($('#newMonoReading').val() == 'bla bla bla') { alert('bla bla bla'); return false; } else { form1.submit(); } @using (Html.BeginForm("action", "controller", FormMethod.Post, new { @id = "form1"})) { <input type="text" id="newMonoReading"><br> <input type="submit" value="Submit" onclick = "return validateForm();" class="btn btn-primary"> } 

Answer 3

This is what worked for me

 @using (Html.BeginForm("Tag", "Translations", FormMethod.Get, new { enctype = "multipart/form-data", onsubmit = "return validateTagInput()" })) 

JQuery

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> function validateTagInput() { //do validation if (x,y,z) { return true; //let page be submitted } else { return false; //do not let submission go through } } </script> 

Answer 4

Try using it as follows:

  <div class="modal-body"> @using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data"})) { <input type="submit" value="Submit" onclick="return validateForm()" class="btn btn-primary">