Блог

Главная - Вопросы по программированию - API валидности для проверки формы

API валидности для проверки формы

#javascript #html #forms

#javascript #HTML #формы

Вопрос:

Я пытаюсь проверить форму с помощью validity API, но у меня возникли некоторые проблемы (2, если быть точным). Один для потери значения, когда текстовое содержимое не может быть отображено, а второй при отправке формы (тогда все поля будут исправлены): ничего не происходит, я не вижу console.log. Вот этот код

HTML

 const formValid = document.getElementById('myButton');
formValid.addEventListener('click', valid);
 
 
// function valid() : allow sending form after checking it
function valid(e) {
    e.preventDefault();
    let isFormOk = true;

 
    let fname = document.getElementById('fname');
    let missFname = document.getElementById('fname_missing');
    let firstNameValue = document.getElementById('fname').value;
 
    let email = document.getElementById('email');
    let missEmail = document.getElementById('email_missing');
    let emailValue = document.getElementById('email').value;
 
    let fnameValid = /^[a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï] ([-'s][a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï] )?$/;
    let emailValid = /^w @[a-zA-Z_] ?.[a-zA-Z]{2,3}$/;
 
    //Validate the firstname :
    if (fname.validity.valueMissing) { //if the field is empty
        missFname.textContent = 'Enter your firstname please!';
        missFname.style.color = 'red';
        isFormOk = false;
    }
    if (fnameValid.test(fname.value) == false) { // if the format is incorrect
        missFname.textContent = 'Incorrect format';
        missFname.style.color = 'black';
        isFormOk = false;
    }
 
    
    //Validate the email :
    if (email.validity.valueMissing) {
        missEmail.textContent = 'Email missing';
        missEmail.style.color = 'red';
        isFormOk = false;
    }
    if (emailValid.test(email.value) == false) {
        missEmail.textContent = 'Incorrect format';
        missEmail.style.color = 'black';
        isFormOk = false;
    }
 
    if (isFormOk) {
        let contact = {
            firstNameValue,
            emailValue
        };
console.log(contact);
} 
 <form novalidate id="myForm">
    <div class="form-group">
        <input type="text" class="form-control" name="fname" id="fname" required>
        <span id="fname_missing"></span>
    </div>
 
    <div class="form-group">
        <input type="email" class="form-control" name="email" id="email" required>
        <span id="email_missing" class="errorMail" aria-live="polite"></span>
    </div>
    <div class="form-group">
        <button id="myButton" name="myButton" type="submit">Confirm</button>
</div>
</form>

Ответ №1:

 const formValid = document.getElementById('myButton');
formValid.addEventListener('click', valid);
 
 
// function valid() : allow sending form after checking it
function valid(e) {
    e.preventDefault();
    let isFormOk = true;

 
    let fname = document.getElementById('fname');
    let missFname = document.getElementById('fname_missing');
    let firstNameValue = document.getElementById('fname').value;
 
    let email = document.getElementById('email');
    let missEmail = document.getElementById('email_missing');
    let emailValue = document.getElementById('email').value;
 
    let fnameValid = /^[a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï] ([-'s][a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï] )?$/;
    let emailValid = /^w @[a-zA-Z_] ?.[a-zA-Z]{2,3}$/;
 
    //Validate the firstname :
    if (fname.validity.valueMissing) { //if the field is empty
        missFname.textContent = 'Enter your firstname please!';
        missFname.style.color = 'red';
        isFormOk = false;
    }
    if (fnameValid.test(fname.value) == false) { // if the format is incorrect
        missFname.textContent = 'Incorrect format';
        missFname.style.color = 'black';
        isFormOk = false;
    }
 
    
    //Validate the email :
    if (email.validity.valueMissing) {
        missEmail.textContent = 'Email missing';
        missEmail.style.color = 'red';
        isFormOk = false;
    }
    if (emailValid.test(email.value) == false) {
        missEmail.textContent = 'Incorrect format';
        missEmail.style.color = 'black';
        isFormOk = false;
    }
 
    if (isFormOk) {
        let contact = {
            firstNameValue,
            emailValue
        };
        missEmail.style.display = 'none';
        missFname.style.display = 'none';
      console.log(contact); 
     }
return isFormOk;
} 
 <form novalidate id="myForm">
    <div class="form-group">
        <input type="text" class="form-control" name="fname" id="fname" required>
        <span id="fname_missing"></span>
    </div>
 
    <div class="form-group">
        <input type="email" class="form-control" name="email" id="email" required>
        <span id="email_missing" class="errorMail" aria-live="polite"></span>
    </div>
    <div class="form-group">
        <button id="myButton" name="myButton" type="submit">Confirm</button>
</div>
</form>

В функции javascript отсутствует фигурная скобка. Проверьте это, если оно отвечает на ваш вопрос.

Комментарии:

1. спасибо , но нет … возврат isFormOk не имеет никакого эффекта