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 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>
精彩评论