Сделайте проверку формы с помощью настраиваемых атрибутов

Question

, пожалуйста, помогите мне сделать валидацию через пользовательский атрибут входного тега (в моем случае: проверка). Помогите мне изменить свой код, чтобы он стал более динамичным и многоразовым.

var validation = function validation(){// out of grid - rename js name 
 

 
     //validate first name - only letters 
 
     var only_letters = /^[A-Za-z]+$/;// allow only letters 
 

 
     if(firstName.value.length === 0){ 
 
      document.getElementsByClassName("error")[0].innerHTML="First Name is required"; 
 
      formIsValid = false; 
 
     } 
 
     else 
 
     if(firstName.value.match(only_letters)){ 
 
      document.getElementsByClassName("error")[0].innerHTML=""; 
 
     } 
 
     else{ 
 
      document.getElementsByClassName("error")[0].innerHTML="Only characters allowed"; 
 
      formIsValid = false; 
 
     } 
 

 
     //validate email 
 

 
     var email_letters = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
 

 
     if(email.value.length === 0){ 
 
      document.getElementsByClassName("error")[2].innerHTML="Email is required"; 
 
      formIsValid = false; 
 
     } 
 
     else 
 
     if(email.value.match(email_letters)){ 
 
      document.getElementsByClassName("error")[2].innerHTML=""; 
 
     } 
 
     else{ 
 
      document.getElementsByClassName("error")[2].innerHTML="Incorrect email format"; 
 
      formIsValid = false; 
 
     }

<form id="user_form" method="post"> 
 

 
    <p> <input type="text" name="first_name" id="first_name" placeholder="First Name" validation="isRequired, correctFormat" /></p> 
 
    <span class="error"></span> 
 
<p><input type="text" name="email" id="email" autocomplete="off" placeholder="Email" validation="isRequired, correctFormat" /></p> 
 
<span class="error"></span> 
 
    </form>

Answer 1

Ну, если вы посмотрите очень внимательно, вы вроде только один метод в его суть. Создайте метод, который получает элемент, выражение регулярного выражения, контейнер ответа и возвращает строку.

Это будет выглядеть примерно так:

function validateMePls(var field, var regex, var placeholder){ 
    var isValid = ""; 
    /** do all your checks here (length, regex, etc), appending 'isValid', then return it at the end */ 
}; 

var isValid = validateMePls(email, email_letters, document.getElementsByClassName("error")[2]); 

/** and now you check 'isValid' for something in it, so you know if you have an error or not */ 

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

Извините за код «близко к Java», но я не занимался Javascript в последнее время.

Удачи.

Answer 2

Вы можете использовать placeholder атрибут, required атрибут, setCustomValidity() набор для placeholder в invalid случае

var inputs = document.querySelectorAll("input:not([type=submit])"); 
 
for (var i = 0; i < inputs.length; i++) { 
 
    inputs[i].oninvalid = function(e) { 
 
    e.target.setCustomValidity(e.target.placeholder) 
 
    } 
 
}

<form id="user_form" method="post"> 
 

 
    <label for="first_name"> 
 
    <input type="text" pattern="[a-zA-Z]+$" name="first_name" id="first_name" placeholder="Input letters a-z A-Z" required /> 
 
    </label> 
 
    <br> 
 

 
    <label for="email"> 
 
    <input type="email" name="email" id="email" autocomplete="off" placeholder="Valid Email is required" required /> 
 
    </label> 
 
    <br> 
 
    <input type="submit" /> 
 
</form>