Выполнение проверки с помощью jquery.validate

Question

Я пытаюсь узнать / понять проверку на стороне клиента с помощью jquery.validate.В настоящее время у меня есть базовая форма, определенная как показано здесь:

<form id="myform">
  <input id="firstNameTextBox" type="text" />
  <input id="lastNameTextBox" type="text" />
  <input type="button" value="Test" onclick="return testButtonClick();" />
</form>

<script type="text/javascript">
    $(document).ready(function () {
        $("#addPersonForm").validate({
            rules: {
                firstNameTextBox: "required",
                lastNameTextBox: "required"
            },
            messages: {
                firstNameTextBox: "Please enter the first name.",
                lastNameTextBox: "Please enter the last name."
            }
        });
    });

    function testButtonClick() {
      string errorMessage = validateFormAndGetMessage();
      alert(errorMessage); 
      return false;
    }
</script>

Когда кто-то нажимает кнопку «Тест», я хочу определить, является ли форма действительной.Если он недействителен, я хочу отобразить сообщение, связанное с нарушающим правилом.Как мне это сделать?

Answer 1

Вы можете позвонить на form() на валидаторе, см. http://docs.jquery.com/Plugins/Validation/Validator/form

Так что вам нужно будет обновить свой код для хранения валидатора, также вы должны использовать проводку событий jquery для захватапри нажатии на кнопку:

<form id="myform">
  <input id="firstNameTextBox" type="text" />
  <input id="lastNameTextBox" type="text" />
  <input type="button" value="Test" id="testbutton" />
</form>

<script type="text/javascript">
$(document).ready(function () {
    validator = $("#addPersonForm").validate({
        rules: {
            firstNameTextBox: "required",
            lastNameTextBox: "required"
        },
        messages: {
            firstNameTextBox: "Please enter the first name.",
            lastNameTextBox: "Please enter the last name."
        }
    });

    $('#testbutton').click(function(event) {
        event.preventDefault();
        validator.form(); //This will show the validation messages on the form      
    });
});
</script>