I have a form that needs validation. My form contains four elements, an articleType select box, an articleTitle input box, an articleUrl input box and a numPages select box. My articleType and numPages select boxes need to be required. My articleTitle and articleUrl input boxes need to be both required and have a minlength of 10. My form never refreshes, instead if the input that is inputted is correct it will go on to the next page.
Here's my code:
HTML
<div style="display: none" class="article_Information">
<form class="article_information_form" action="" method="POST">
<p>Article type</p>
<select name="articleType" required>
<option value="" disabled="disabled" selected></option>
<option value="Lifestyle">Lifestyle</option>
<option value="Entertainment">Entertainment</option>
<option value="Society">Society</option>
<option value="Strange">Strange</option>
<option value="Science">Science</option>
<option value="Tech">Tech</option>
</select><br>
<p>Title </p>
<input id="articleTitle" type="text" name="articleTitle" maxlength="75" required>
<p style="clear: both">Article URL</p>
<input id="articleUrl" type="text" name="articleUrl" maxlength="65" required><br>
<div style="display: block; margin: 20px; color: gray">
<p style="text-align: center; font-weight: normal; font-size: 15px; display: inline; font-style: italic; clear: both; float: none">URL:</p><p id="urlDisplay" style="text-align: center; font-weight: normal; font-size: 15px; display: inline"></p>
</div>
<p>Number of pages</p>
<select id="numPages" name="numPages" required>
<option value="" disabled="disabled" selected></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select><br>
<input id="btn" type="submit" name="article_info_btn" value="Submit">
</form>
</div> <!--End of article information div-->
jQuery
<script type="text/javascript">
$(".article_information_form").validate({
//specify the validation rules
rules: {
articleType: "required",
numPages: "required",
articleTitle: {
required: true,
minlength: 10
},
articleUrl: {
required: true,
minlength: 10
}
},
//specify validation error messages
messages: {
articleType: "First Name field cannot be blank!",
numPages: "Last Name field cannot be blank!",
articleTitle: {
required: "Password field cannot be blank!",
minlength: "Your password must be at least 6 characters long"
},
articleUrl: "Please enter a valid email address"
},
});
$('.article_information_form').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '',
data: $(this).serialize(),
success: function(data) {
$(".article_Information").fadeOut("slow");
$(".article_properties").fadeIn("slow");
$("#addOne").fadeIn("slow");
numPages = $('#numPages option:selected').val();
$('.pageNumber').text(numPages);
$('.inputNumber').text(numPages);
}
});
})
With my current code, it will display the error messages and then go to the next page. How can I make it stay at the current page till the user corrects their mistakes? Also, I know it's more effective for PHP to validate a form, but in this case would it still be better? If so, how can I relay information back to Ajax so error messages can be displayed using PHP?
