2015-02-03 4 views
0

Im пытается сделать проверку нескольких js. Когда я сначала нажимаю кнопку «Отправить», все работает отлично, все поля ввода пустые, но если я поместил правильную форму в поле ввода, когда я нажму кнопку «Отправить», старый текст предупреждения останется там.вопросы о подтверждении ввода формы ввода

Как удалить старый красный предупреждающий текст, если он имеет действительный ввод, когда я нажимаю кнопку ввода?

function FormValidation(){ 
    var fn=document.getElementById('firstname').value; 
    var em=document.getElementById('email').value; 
    var atpos = em.indexOf("@"); 
    var dotpos = em.lastIndexOf("."); 
    var phone = document.getElementById('phonenumber').value; 
    var ln=document.getElementById('lastname').value; 

    if(fn==null || fn=="" || /[0-9]/g.test(fn)){ 
     document.getElementById('invalid_first').innerHTML="*please enter a valid first name."; 
     document.getElementById('firstname').style.borderColor = "red"; 
    } 
    if(ln==null || ln=="" || /[0-9]/g.test(ln)){ 
     document.getElementById('invalid_last').innerHTML="*Please Enter a Valid Last Name."; 
     document.getElementById('lastname').style.borderColor = "red"; 
    } 

    if(phone.length != 12 || phone[3]!= '-' || phone[7] != '-') { 
     document.getElementById('invalid_phone').innerHTML="*Please enter a Valid Phone Number, ex:000-000-0000"; 
     document.getElementById('phonenumber').style.borderColor = "red"; 
      } 
    if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=em.length) { 
     document.getElementById('invalid_email').innerHTML="*Please Enter a valid Email Address."; 
     document.getElementById('email').style.borderColor = "red"; 
    } 
    return false; 
} 

ответ

0

Используйте CSS display:none, чтобы скрыть и display:block, чтобы показать или скрыть DIV. В javascript используйте document.getElementById('my_id').style.display. Как вы это делаете, вам придется вручную удалять цвета границ при каждом запуске функции проверки.

0

Короче говоря,

При добавлении ваших ошибок в ваш HTML я бы обернуть их с пролетом и дать, что ИД. Когда вы проверяете значение при нажатии кнопки «Отправить» и ввод действителен, вы можете удалить этот элемент с указанным идентификатором.

Короткий модифицированный образец (непроверенный) ваша проверки ПгвЬЫата бы тогда:

if(fn==null || fn=="" || /[0-9]/g.test(fn)){ //if element is invalid 
    document.getElementById('invalid_first').innerHTML="<span id="firstname-error">*please enter a valid first name.</span>"; 
    document.getElementById('firstname').style.borderColor = "red"; 
} else { //no errors on submit, remove error message element. 
    document.getElementById('firstname-error').remove(); //replace firstname-error with every single ID you want to give an element. 
    document.getElementById('firstname').style.borderColor = "#oldbordercolor"; //for resetting the bordercolor, change the #oldbordercolor to your default border-color 
} 

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

Смежные вопросы