How to check validation form before submit in jQuery?

Question

I use JQuery form validation. But i need validation form before submit with click on tag <a>.

For example:

<form action="/registration" method="POST">
 <p>
    User name (4 characters minimum, only alphanumeric characters):
    <input data-validation="length alphanumeric" data-validation-length="min4">
  </p>
  <p>
    Year (yyyy-mm-dd):
    <input data-validation="date" data-validation-format="yyyy-mm-dd">
  </p>
  <p>
    Website:
    <input data-validation="url">
  </p>
  <p>
    <a href="">Check before registration</a>
    <input type="submit" style="display: none;">
  </p>
</form>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
   $.validate({
      lang: 'es'
   });
</script>

If form is not any error show submit button.

How to check validation form before submit in jQuery?

Possible duplicate of [Jquery form validation](https://stackoverflow.com/questions/12006344/jquery-form-validation) — lumio, Aug 17 '17 at 13:38
You would just run a lot of conditionals inside of a function that is running either on keyup or on the form submission. Checking the input value length, checking for the index of http: || https: in the url input etc. — kenny, Aug 17 '17 at 13:40
So what exactly do you want to achieve? Do you want to validate as you type? — lumio, Aug 17 '17 at 13:47
@kenny, Hi, i create form and before submit need check validation form in my website. How to check? — mySun, Aug 17 '17 at 13:47
The answer given will validate before allowing the submit, the only difference is if you use that answer you will have to amend it to fit your source code and add validation to the inputs you wish to validate. — NewToJS, Aug 17 '17 at 13:48
So you haven't really done anything so far have you.... other than copy/paste the basic example from http://www.formvalidator.net/ Maybe read the documentation http://www.formvalidator.net/#configuration or look at more examples. Don't expect others to do all the work for you, this isn't a free writing service. — NewToJS, Aug 17 '17 at 13:57
@lumio , This answer use submit in code `$('form').submit(function(){`... ! — mySun, Aug 17 '17 at 14:17
Please clarify your question then. As you are stating now you want to validate before form gets submitted. If you want to send the form data after validation via AJAX look at this [accepted answer here](https://stackoverflow.com/a/1960245/881032) — lumio, Aug 17 '17 at 14:38

Trion · Accepted Answer · 2017-08-17T14:39:29.263

1

Recommended: Just have the submit button at place, and put the rules for validation in html and call the $.validate() as provided with library. That way library can work with more stability.

But if you want to do it programmatically, and show submit button only after a validate button, this might be helpful, http://www.formvalidator.net/#advanced_programmatically with this code to trigger the validation

// This will keep using use default options
// and validate on submit or if user presses enter
$.validate(); 


// This will validate on clicking verify button and show a submit button
$("#verify-button").on("click", function(e){
    if($("#myform").isValid()){
         $("#submit-button").show();
    }
});

A fiddle snippet https://jsfiddle.net/cad2xjb0/2/

edited Aug 17 '17 at 14:39

answered Aug 17 '17 at 13:49

Trion

400
3
11

That is already handled by $.validate function that is run without any event, in the Form Demo of the library it triggers validation before submission. I tried pressing Enter and it did the validation. Can you confirm @NewToJS ? http://www.formvalidator.net/#reg-form – Trion Aug 17 '17 at 13:56
:P but that also makes the validate button and then submit button deal unnecessary, just have submit button and let library handle the validation as it is supposed to. – Trion Aug 17 '17 at 14:00
Thank you, But don't work this code for me... please explain more – mySun Aug 17 '17 at 14:03
This will trigger the validation on click event on an element with id "verify-button" and show the submit button with id "submit-button" – Trion Aug 17 '17 at 14:11
$("#passenger-form").validate(function(valid, elem){ if(valid) { console.log('11'); } }); don't work for me... – mySun Aug 17 '17 at 14:14
Updated the code :P had made a mistake @mySun also included an ugly but working js fiddle. – Trion Aug 17 '17 at 14:40
Thank you for help me :-) – mySun Aug 17 '17 at 14:48

How to check validation form before submit in jQuery?

1 Answers1