Оптимизация формы проверки с помощью jQuery

Question

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

$(document).ready(function() { 
$("#submit").click(function() { if($("#name").val()==''||$("#name").val()==null){ $("#name").val("").attr("placeholder","An error occured!").addClass("changePlaceColor1").addClass("changePlaceColor2").addClass("changePlaceColor3").addClass("changePlaceColor4"); } }) }) 

here is my code in the codepen

хочу также, чтобы сделать это, чтобы эти изменения остаются пока вы не нажмете ввод.

Answer 1

просто добавить класс = «проверки» для всех полей, которые должны быть проверены, и не изменить JS к этому

<form> 
    <input id="name" type="text" placeholder="test message1" data-error="1" class="validation" /> 
    <input id="phone" type="tel" placeholder="test message1" data-error="2" class="validation"/> 
    <input id="email" type="email" placeholder="test message1" data-error="3" class="validation"/> 
    <button id="submit">Submit</button> 
</form> 

$(document).ready(function() { 
    $("#submit").click(function(e) { 
    $(".validation").each(function(){ 
     if($(this).val()==''||$(this).val()==null){ 
      $(this).val("") 
      .attr("placeholder",$(this).data("error")) 
      .addClass("changePlaceColor1") 
      .addClass("changePlaceColor2") 
      .addClass("changePlaceColor3") 
      .addClass("changePlaceColor4"); 
      e.preventDefault(); 
      } 
    }); 
    }) 
}); 

Нет причин, чтобы добавить проверку для каждого поля sepperatly, добавьте базовый код проверки и перебирать все применимые поля. Меньше времени тот же кусок кода, который вы имеете, тем лучше ваш код

EDIT: Пользовательский текст ошибки для каждого входа через данные атрибута

Answer 2

$("#submit").click(function() { 
 
    $('input').each(function(){ 
 
     if($(this).val()=='' || $(this).val()==null){ 
 
     $(this).attr('placeholder','An error occured!').addClass('changePlaceColor'); 
 
     } 
 
    }); 
 
    });

.changePlaceColor::-webkit-input-placeholder { 
 
    color: red; 
 
} 
 
.changePlaceColor:-moz-placeholder { 
 
    color: red; 
 
} 
 
.changePlaceColor:-ms-input-placeholder { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input id="name" type="text" placeholder="test message1"/> 
 
    <input id="phone" type="tel" placeholder="test message1"/> 
 
    <input id="email" type="email" placeholder="test message1"/> 
 
    <button type="button" id="submit">Submit</button> 
 
</form>

Answer 3

первый: Вы можете использование $('form').on('submit' , function(){ //code here });Take a look here

2nd: Вы n ПЕД использовать e.preventDefault(); для предотвращения Reload

третий: Вы должны использовать .each() размещены в @Elentriel answer и @jonju answer

четвёртая: С addClass() вы можете использовать .addClass("changePlaceColor1 changePlaceColor2 changePlaceColor4");Take a look here