HTML form / submit button. How to validate inputs and prevent submit

Question

I want to use a submit button because it checks my form input attributes.

My inputs are all numerical and have attributes of min / max / required all given by jQuery:

<form id="form1">
<table id="table">
  <tr>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
  </tr>
</table>
  </form>
<button form="form1">check inputs</button>

And the validation attributes are assigned with jQuery (min: 1, max: 9, required)

  $('input').attr({
    min: 1,
    max: 9,
  }).prop('required', true);

I have jQuery set up to extract the numerical values from the inputs and put them into an array, but if I use this button, it attempts to 'submit' the form which I don't want. But if I add event.preventDefault() the submit button no longer checks for the min/max/required values.

Essentially all I want my button to do is to check the validation requirements, and trigger the jQuery click event.

EDIT / CLARIFICATION:

I want 3 things: 1. prevent the form from submitting. No POST 2. Validate / make sure each input has a valid value 3. trigger a jQuery click event ( $('button').on('click', function(){ do something... });

DinoMyte · Accepted Answer · 2015-11-05 23:44:56Z

3

Just call jquery.validate() and if it fails, invoke e.preventDefault()

$("button").click(function(e)
     {
        if(!jquery.validate())
        e.preventDefault();
    });

http://jsfiddle.net/o5y9959b/8/

answered Nov 5, 2015 at 23:44

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

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

8 Comments

jmancherje Over a year ago

I want to always prevent the submit, otherwise the solution seems to be good in the fiddle. However, I'm getting the error: 'jquery is not defined' in my console.

jmancherje Over a year ago

jsfiddle.net/kingcharles/LEZ4r/824 this is a fiddle of my actual code, I can't seem to get the form validation to work

DinoMyte Over a year ago

I can trigger an alert on button click. where are seeing the error ? jsfiddle.net/LEZ4r/825

DinoMyte Over a year ago

you have to put e.preventDefaut() inside the validation. Here's the working code : jsfiddle.net/LEZ4r/826

jmancherje Over a year ago

Thank you, that works better, however the main objective I have from my question is I want the validation to work (which it does), but I don't want the form to submit. If you use the fiddle you sent me, and fill in each cell with a valid value, it will submit and the form will clear. I don't want any POST requests, I just want the button to check the validation and trigger a click event

|

Yalin · Accepted Answer · 2015-11-05 23:43:32Z

0

put this one instead:

<form id="form1" >
<table id="table">
  <tr>
    <td>
      <input type="number" min="1" max="9" required /> </td>
    <td>
      <input type="number" min="1" max="9" required /> </td>
    <td>
      <input type="number" min="1" max="9" required/> </td>
  </tr>
</table>
<button type="submit">check inputs</button>
  </form>

you don't need to use jquery for this.

answered Nov 5, 2015 at 23:43

Yalin

3553 silver badges9 bronze badges

Comments

Albi · Accepted Answer · 2017-01-12 16:20:38Z

I don't know what goes wrong in your case but i explained it again so you can find something that you might find useful.

<form id="form1" >
<table id="table">
  <tr>
    <td>
      <input type="number" min="1" max="9" required /> </td>
    <td>
      <input type="number" min="1" max="9" required /> </td>
    <td>
      <input type="number" min="1" max="9" required/> </td>
  </tr>
</table>
</form>

<button type="submit" class="onlycheck" form="form1">check inputs</button>
<button type="submit" form="form1">Submits form</button>



$("#form1").on('submit',function(e){
     if( $(e.target).hasClass('onlycheck') ){
         /* 
          some extra validation code here if you want 
          e.x : var valid = true;
          $(this).find('input[type=number]').each(function(i,el){
             if( $(el).val() > $(el).attr("max") ||  $(el).val() < $(el).attr("min")){ //notice that is not performant declare first $(el)
                  valid = false;
                  return false; //break the cicle 
             }
         });
         */
         return false;
     }
});

Collectives™ on Stack Overflow

HTML form / submit button. How to validate inputs and prevent submit

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related