цикл проверки на стороне клиента javascript

Question

umm .. Я хотел бы показать пользователям, что им нужно заполнить, если они не заполнили их имя, адрес электронной почты или сообщение. Например, они заполнили свое имя, но они не заполнили их электронной почты и сообщения, поэтому появится сообщение об ошибке, которое должно заполнить их адрес электронной почты и сообщение. мой код здесь показывает все ошибки, даже если они заполнили свое имя.

function validate() { 
    var myName = document.getElementById("inputName"); 
    var myEmail = document.getElementById("inputEmail"); 
    var filter = /^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i; 
    var myMessage = document.getElementById("inputMessage"); 
    var isValid = true; 

    if(myName.value == "") { 
     var myNameError = document.getElementById("inputNameError"); 
     myNameError.innerHTML = "Please provide your name."; 
     isValid = false; 
    } 

    if (!filter.test(myEmail.value)) { 
     var myEmailError = document.getElementById("inputEmailError"); 
     myEmailError.innerHTML="Please provide your email."; 
     isValid = false; 
    }  

    if(myMessage.value == "") { 
     var myMessageError = document.getElementById("inputMessageError"); 
     myMessageError.innerHTML = "Please provide your message."; 
     isValid = false; 
    } 

    return isValid; 
} 

Answer 1

Если мое понимание ваш вопрос правильно. Ниже приведен ваш сценарий:

1. В первый раз, когда вы не даете значения для какого-либо поля, отображаются все ошибки.
2. Во-вторых, вы вводите ввод для поля имени и ожидаете, что ошибка имени исчезнет, ​​но все же отображается.

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

function validate() { 
    var myName = document.getElementById("inputName"); 
    var myEmail = document.getElementById("inputEmail"); 
    var filter = /^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i; 
    var myMessage = document.getElementById("inputMessage"); 
    var isValid = true; 

    var myNameError = document.getElementById("inputNameError"); 
    var myEmailError = document.getElementById("inputEmailError"); 
    var myMessageError = document.getElementById("inputMessageError"); 

    //Initially hide all previous error messages. 
    myNameError.className="hidden"; 
    myEmailError.className="hidden"; 
    myMessageError.className="hidden"; 

    if(myName.value == "") { 
     myNameError.className="visible";//make error message div visible only on error. 
     myNameError.innerHTML = "Please provide your name."; 
     isValid = false; 
    } 

    if (!filter.test(myEmail.value)) { 
     myEmailError.className="visible";//make error message div visible only on error. 
     myEmailError.innerHTML="Please provide your email."; 
     isValid = false; 
    }  

    if(myMessage.value == "") { 
     myMessageError.className="visible";//make error message div visible only on error. 
     myMessageError.innerHTML = "Please provide your message."; 
     isValid = false; 
    } 

    return isValid; 
} 

CSS

.hidden {display: none;} 
.visible {display: block;} 

EDIT Добавление fiddle ссылку на основе комментариев.

Answer 2

Вы могли бы дать Validation JQuery попробовать: http://jqueryvalidation.org/documentation/

Это избавит вас от многих головных болей проверки ...