У меня есть форма обновления пароля, которая использует проверку JQuery для трех полей. Проверка правильности работает правильно при первом отображении формы, и, если введенные данные проверяются, сообщение об успехе отображается вместе с формой во второй раз. Если пользователь нажимает кнопку отправки во второй раз, когда форма отображается, форма отправляется без проверки.
Одна вещь, на которую следует обратить внимание, хотя я не уверен, что это имеет значение, это то, что существуют правила проверки для нескольких форм в одном и том же файле js, потому что все формы расположены на одной странице и отображаются через show / hide JS.
Кроме того, проверка для моей другой формы (форма резервирования) также не работает, когда отображается сообщение об успешном завершении, но как только сообщение об успешном завершении над формой обновления пароля заменяется любыми другими данными, все функции проверки работают должным образом.
Есть идеи, почему, когда сообщение об успехе отображается над формой обновления пароля, проверка формы обновления пароля не работает при следующей отправке?
В случае успеха генерируется следующий вывод:
$output = '<p class="message">Your password has been updated.</p>
, а затем добавляется следующее:
<!-- php snippet -->
$output .= '<form method="post" action="thispage.php" method="post" name="updatepassword" id="updatePasswordForm">
<input type="hidden" value="updatePassword" name="task">
<table class="members">
<tr>
<td class="formlabel top">Current Password: </td>
<td><input name="currentpassword" id="currentpassword" type="password" size="30" class="inputbox" placeholder="Your Current Password"></td>
</tr>
<tr>
<td class="formlabel top">New Password: </td>
<td><input name="newpassword" id="newpassword" type="password" size="30" class="inputbox" placeholder="Your New Password"></span></td>
</tr>
<tr>
<td class="formlabel top">Re-enter New Password: </td>
<td><input name="newpassword2" id="newpassword2" type="password" size="30" class="inputbox" placeholder="New Password Again for Validation"></td>
</tr>
<tr>
<td colspan="2" class="center"><input type="submit" name="Submit" class="button" value="Update Password"></td>
</tr>
</table>
</form> ';
<!-- end snippet -->
и отображается:
echo $output;
JS:
$().ready(function() {
// validate reservation form on keyup and submit
$("#ReservationForm").validate({
rules: {
datepicker: {
required: true
},
number: {
required: true,
digits: true
}
},
messages: {
datepicker: {
required: "Enter the date<br />Use the calendar to select the date"
},
number: {
required: "Enter your number",
digits: "Enter only digits"
}
}
});
// validate select segments form on keyup and submit
$("#selectSegments").validate({
rules: {
'segment[]': {
required: true
}
},
messages: {
'segment[]': {
required: "Select at least one segment"
}
}
});
// validate update password form on keyup and submit
$("#updatePasswordForm").validate({
rules: {
currentpassword: {
required: true,
remote: "remote/check.current.password.php"
},
newpassword: {
required: true,
minlength: 6
},
newpassword2: {
required: true,
minlength: 6,
equalTo: "#newpassword"
}
},
messages: {
currentpassword: {
required: "Enter your current password",
remote: "Your password is incorrect"
},
newpassword: {
required: "Enter your new password",
minlength: "Enter at least 6 characters"
},
newpassword2: {
required: "Reenter your new password",
minlength: "Enter at least 6 characters",
equalTo: "New passwords don't match"
}
}
});
});
<!-- end snippet -->