jQuery validate form with onclick button

Question

I have a very big form with a lot of inputs inside. Some of those inputs are mandatory and I need to check them with jQuery 1.3.2. I am using NOT a submit button but a <input type ="button"> -- I need to use that because I have to fire an ajax call when the button is clicked.

So what the code should do is:

Check if the mandatory fields are properly entered.
If the mandatory fields are NOT properly entered an image should be shown.
If the mandatory fields are correct then the ajax call can run.

As you may see some fields are repeated, so the code should be able to work also on ANY repeated/duplicate input (same Name and ID)

    <form action ="">
    <!-- First Author -->
    Author Name: <input type="text" id="AuthorName" name="authorNAMEinput">
<img src="error.png" style="display:none">
    Author DOB: <input type="text" id="AuthorDOB" name="authorDOBinput">
    Author Company: <input type="text" id="AuthorCompany" name="authorCompanyinput">
<img src="error.png" style="display:none">
    <!-- Second Author -->
    Author Name: <input type="text" id="AuthorName" name="authorNAMEinput">
<img src="error.png" style="display:none">
    Author DOB: <input type="text" id="AuthorDOB" name="authorDOBinput">
    Author Company: <input type="text" id="AuthorCompany" name="authorCompanyinput">
<img src="error.png" style="display:none">
    <!-- Third Author -->
    Author Name: <input type="text" id="AuthorName" name="authorNAMEinput">
<img src="error.png" style="display:none">
    Author DOB: <input type="text" id="AuthorDOB" name="authorDOBinput">
    Author Company: <input type="text" id="AuthorCompany" name="authorCompanyinput">
<img src="error.png" style="display:none">
    <input type ="button" id="authorbutton" name="authorbuttoninput">
    </form>

Now lets say that the mandatory fields are AuthorName and AuthorCompany.

I know how to proceed with the jQuery $.get and with the button onclick function, but I do not know how to BEFORE validate those mandatory fields and fire the $.get function onclick ONLY if the fields are properly entered. And I do not know how to make <img src="error.png" style="display:none"> visible if the entered fields are not valide (make it visible for each NON-validate field).

A duplicate id is invalid mark-up, as an id must be unique within the document, a duplicate name is valid, as far as I know, but unless it's in the form name[] the last value submitted with that name will over-write any earlier values. — David Thomas
– David Thomas, Commented Jun 4, 2011 at 12:14
The user can add more Authors. How do I can do that if I do not duplicate the fields? — DiegoP.
– DiegoP., Commented Jun 4, 2011 at 12:16
Are you using JQuery? If not, I advise you do. If yes, download the jQuery.validate plugin and read the documentation. It eases validation. Try link — afaolek
– afaolek, Commented Jun 4, 2011 at 12:17
You can use name="authors[]" which submits authors as an array, accessible to, for example, php (on the subsequent page/script) as $_POST['authors'] — David Thomas
– David Thomas, Commented Jun 4, 2011 at 12:18
@David I think submits as an array is misleading. PHP does that magic, the browser will just submit it as is. — alex
– alex, Commented Jun 4, 2011 at 12:29

beetstra · Accepted Answer · 2011-09-28 11:15:12Z

You could do something like this:

 <form action ="">
    <!-- First Author -->
    Author Name: <input type="text" id="AuthorName1" name="authorNAMEinput">
     <img src="error.png" id="AuthorName1_error" style="display:none">
    Author DOB: <input type="text" id="AuthorDOB1" name="authorDOBinput">
    Author Company: <input type="text" id="AuthorCompany1" name="authorCompanyinput">
     <img src="error.png" id="AuthorCompany1_error" style="display:none">
    <!-- Second Author -->
    Author Name: <input type="text" id="AuthorName2" name="authorNAMEinput">
     <img src="error.png" id="AuthorName2_error" style="display:none">
    Author DOB: <input type="text" id="AuthorDOB2" name="authorDOBinput">
    Author Company: <input type="text" id="AuthorCompany2" name="authorCompanyinput">
     <img src="error.png" id="AuthorCompany2_error" style="display:none">
    <!-- Third Author snipped -->
    <input type ="button" id="authorbutton" name="authorbuttoninput">
</form>
<script>
  $('#authorbutton').click(function() {
    var valid = true;
    var requiredFields = ['AuthorName1','AuthorCompany1','AuthorName2','AuthorCompany2'];
    for(var i = 0; i < requiredFields.length; i++) {
      var val = $('#'+requiredFields[i]));
      if (!val) {
        $('#'+requiredFields[i]+'_error').show();
        valid = false;
      } else
        $('#'+requiredFields[i]+'_error').hide();
    }
    if (valid) {
      // ajax stuff
    }
  });
</script>

Collectives™ on Stack Overflow

jQuery validate form with onclick button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related