jQuery validate form with onclick button

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:

1. Check if the mandatory fields are properly entered.

2. If the mandatory fields are NOT properly entered an image should be shown.

3. If the manda开发者_如何学Pythontory 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).

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>