Добавить и удалить атрибут в javascript

Моя проблема в том, когда я нажимаю submit, он должен добавить класс box только для пустых полей. Но мой код добавляет класс box как для заполненных, так и незаполненных полей.Добавить и удалить атрибут в javascript

function validate() { 
 

 
    var a = document.forms["Form"]["uname"].value; 
 
    var b = document.forms["Form"]["number"].value; 
 
    var c = document.forms["Form"]["mail"].value; 
 

 
    if (a == null || a == "", b == null || b == "", c == null || c == "") { 
 
    ['uname', 'mobNo', 'mail'].forEach(function(ids) { 
 
     document.getElementById(ids).style.border = "1px solid red"; 
 
    }); 
 
    return false; 
 
    } else if (!a.match(/^([a-zA-Z]{2,30})$/)) { 
 
    document.getElementById('uname').className = 'box'; 
 
    return false; 
 
    } else if (!b.match(/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/)) { 
 
    document.getElementById('mobNo').className = 'box'; 
 
    return false; 
 
    } else if (!c.match(/^([\w-\.][email protected]([\w-]+)+(\.[\w-]{2,4})?)$/)) { 
 
    document.getElementById('mail').className = 'box'; 
 
    return false; 
 
    } 
 

 
}

.box { 
 
    border: 2px solid red; 
 
}

<html> 
 

 
<head> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <form method="post" name="Form" onsubmit="return validate()" action="" id="form_id"> 
 
    <fieldset> 
 
     <label>NAME:</label> 
 
     <input type="text" name="uname" id="uname" class="fields"> 
 
     <label>MOBILE NUMBER:</label> 
 
     <input type="text" name="number" id="mobNo" class="fields" minlength="10" maxlength="10"> 
 
     <label>EMAIL:</label> 
 
     <input type="email" name="mail" id="mail" class="fields"> 
 
     <button type="submit" name="submit">SUBMIT</button> 
 
    </fieldset> 
 
    </form> 
 
</body> 
 

 
</html>

источник

2017-01-10 user7397787

Ваш первый 'пункт if' ложна:' '|| = логическое или,' '&& = логическое и ->', если (а == null || a == "", b == null || b == "", c == null || c == "") 'должно быть' if ((a == null || a == " ") && (b == null || b ==" ") && (c == null || c ==" "))' – Andreas

Существует ошибка в вашем случае остальное условия

Вы можете подтвердить свою форму таким образом.

function validate() { 
     var a = document.forms["Form"]["uname"].value; 
     var b = document.forms["Form"]["number"].value; 
     var c = document.forms["Form"]["mail"].value; 

     var validation=true; 

     if ((a == null || a == "")||(!a.match(/^([a-zA-Z]{2,30})$/))) { 
     document.getElementById('uname').className = 'box'; 
     validation=false; 
     } else{ 
     document.getElementById('uname').className = ''; 
     } 

     if ((b == null || b == "")||(!b.match(/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/))) { 
     document.getElementById('mobNo').className = 'box'; 
     validation=false; 
     } else{ 
     document.getElementById('mobNo').className = ''; 
     } 

     if ((c == null || c == "")||(!c.match(/^([\w-\.][email protected]([\w-]+)+(\.[\w-]{2,4})?)$/))) { 
     document.getElementById('mail').className = 'box'; 
     validation=false; 
     }else{ 
     document.getElementById('mobNo').className = ''; 
     } 

     return validation; 
    }

Вот рабочая codepen ссылка, http://codepen.io/nadirlaskar/pen/rjOEJQ

источник

2017-01-10 07:14:27

в:

if (a==null || a=="",b==null || b=="",c==null || c=="")

, оператор не будет делать ничего; она возвращает последнее сравнение:

(c==null || c=="")

пожалуйста исправить, как

if ((a==null || a=="") && (b==null || b=="") && (c==null || c==""))

источник

2017-01-10 06:56:56

Добавить и удалить атрибут в javascript

ответ

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