Как я могу избежать повторения isValid в этом случае проверки JQuery?

Question

Я пытаюсь проверить поле, мои основные цели:

1. , когда пользователь попадает на страницу, без проверок
2. проверка начинается, когда пользователь нажимает ИмяПоле запроса, и оно проверяется как при поднятии ключа, так и при фокусировке
3. Поле также проверяется при отправке формы: если поле недействительно, нажатие кнопки отправки ничего не должно делать, кроме показа сообщения проверки;Форма будет отправлена ​​только тогда, когда поле является действительным.

Вот фрагмент, который я придумал:

var myForm = $("#myform"),
    nameQuery = $("#NameQuery");

myForm.validate({
  rules: {
    NameQuery: "required"
  },
  messages: {
    NameQuery: "Please fill in name query"
  }
});

nameQuery.on("focusout keyup submit", function() {
  var isValid = myForm.valid();
  if (!isValid) {
    nameQuery.addClass("alert-text");
  }
  else {
    nameQuery.removeClass("alert-text");
  };
});

nameQuery.on("submit", function() {
  var isValid = myForm.valid();
  if (isValid) {
    $("p").html("Form sumitted");
  }
  else {
    $("p").empty();
  };
});

.alert-text {
  border: 1px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post">
  <label for="NameQuery">Name Query: </label>
  <input type="text" id="NameQuery" name="NameQuery">
  <input type="submit" value="Search">
  <p></p>
</form>

Несколько проблем:

1. Я дважды использовал var isValid = myForm.valid();, кажется, немного повторяется, но я не мог думатьболее кратким способом?
2. если поле является действительным, нажатие кнопки отправки приводит к тому, что все исчезает?
3. может ли мой фрагмент улучшить каким-либо образом?

РЕДАКТИРОВАТЬ : говоря, что код повторяется и является более кратким, я имел в виду, можно ли объединить эти две части в одну часть:

nameQuery.on("focusout keyup submit", function() {
  var isValid = myForm.valid();
  if (!isValid) {
    nameQuery.addClass("alert-text");
  }
  else {
    nameQuery.removeClass("alert-text");
  };
});

и

nameQuery.on("submit", function() {
  var isValid = myForm.valid();
  if (isValid) {
    $("p").html("Form sumitted");
  }
  else {
    $("p").empty();
  };
});

Они работают натот же элемент и логика внутри выглядит аналогично.

Answer 1

Ответы:

1) Если это кажется повторяющимся var isValid = myForm.valid();, используйте if(myForm.valid()) this.

2) Все исчезает, потому что вы вызываете функцию отправки в поле ввода вместо формы иповедение отправки формы по умолчанию - обновить. Попробуйте следующий код

  var myForm = $("#myform"),
    nameQuery = $("#NameQuery");

myForm.validate({
  rules: {
    NameQuery: "required"
  },
  messages: {
    NameQuery: "Please fill in name query"
  }
});

nameQuery.on("focusout keyup submit", function() {
  if (!myForm.valid()) {
    nameQuery.addClass("alert-text");
  }
  else {
    nameQuery.removeClass("alert-text");
  };
});

myForm.on("submit", function(e) {
  e.preventDefault();
  if (myForm.valid()) {
    $("p").html("Form submitted");
  }
  else {
    $("p").empty();
  };
});

.alert-text {
  border: 1px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post">
  <label for="NameQuery">Name Query: </label>
  <input type="text" id="NameQuery" name="NameQuery">
  <input type="submit" value="Search">
  <p></p>
</form>

3) Я немного его улучшил. Вы можете увидеть выше

Answer 2

Вы совершенно не понимаете, что этот плагин может сделать для вас ...

, когда пользователь попадает на страницу, без проверок

Это уже значение по умолчаниюповедение этого плагина. Ничего не происходит, когда страница загружается, за исключением инициализации плагина, которую пользователь не видит.

проверка запускается, когда пользователь щелкает поле «Запрос имени», и он проверяется как при поднятии ключа, так и при фокусировке

Это называется «нетерпеливой» проверкой, а плагин «ленив» по ​​умолчанию. Существует простой способ реализовать «нетерпение» без каких-либо внешних обработчиков событий.

Поле также проверяется при отправке формы: если поле недействительно, нажатие кнопки «Отправить» ничего не должно делать, кроме отображения сообщения проверки. ;Форма будет отправлена ​​только в том случае, если поле действительно.

Именно так работает этот плагин, когда он используется правильно.

, повторяя код и будучи более сжатым, я имел в видуМогут ли эти 2 части быть объединены в 1 часть:

Нет, эти две части должны быть полностью удалены. Они излишни, так как плагин уже предоставляет вам эти опции.

---

Вам действительно нужно просмотреть документы, чтобы понять все здесь . В редких случаях вам нужны функции внешнего обработчика событий, поэтому, если вы это сделаете, все станет намного сложнее, чем нужно. На этом этапе вы можете просто написать свою собственную функцию проверки с нуля.

Этот плагин имеет submitHandler для настраиваемого кода, когда форма действительна и отправляется, опции onfocusout и onkeyup для настраиваемого кода при выполнении этих действий, а также множество других опций и конфигураций.

Для красной пунктирной линии вокруг ввода класс по умолчанию - error, поэтому просто нацельтесь на этот класс с помощью CSS.

input.error {
    /* this targets the input element with a pending validation error */
    border: 1px dashed red;
}

label.error [
    /* this targets the validation error message */
}

Если вам действительно нужно изменить имя класса по умолчанию, тогда используйте опцию errorClass.

Используйте submitHandler, только если вы хотите дополнительный пользовательский код при отправке,Пример: при отправке через ajax. В противном случае для обычной отправки можно пропустить submitHandler, а поведение плагина по умолчанию будет просто отправлять форму, когда она действительна.

Используйте onfocusout и onkeyup для пользовательскихкод на эти действия. Если вам нужна более энергичная проверка, например, проверка перед первоначальной попыткой отправки, вы можете поместить здесь специальный код, чтобы форсировать это. В противном случае удалите эти два параметра и попробуйте снова. Ваша форма имеет только один вход, так что это может не иметь никакого значения, так как проверка вступит в силу, если они введут в поле и возврат. «Стремление против ленивых» - более серьезная проблема, когда пользователь просматривает несколько входов, ничего не печатая. Не совсем так.

var myForm    = $("#myform");

// nameQuery = $("#NameQuery"); // NOT needed here.  
/* Plugin uses NAME attribute only, not ID and not assigned variables */

myForm.validate({
    rules: {
        NameQuery: "required"
    },
    messages: {
        NameQuery: "Please fill in name query"
    },
    onkeyup: function(element) {
        this.element(element);  // <- force "eager validation"
    },
    onfocusout: function(element) {
        this.element(element);  // <- force "eager validation"
    },
    // errorClass: "alert-text", // default is "error" - just use CSS
    submitHandler: function(form) {
        $("p").html("Form submitted"); // for demo
        // form.submit(); // default line, un-comment to submit when valid or leave out entire submitHandler to submit when valid
    }
});

input.error {
    border: 1px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post">
    <label for="NameQuery">Name Query: </label>
    <input type="text" id="NameQuery" name="NameQuery">
    <input type="submit" value="Search">
    <p></p>
</form>