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'句はfalseです：' '|| =論理や、' && '=論理と - >'場合（== c == ""） 'は、if（（a == null || a ==）である必要があります。 "）&&（b == null || b ==" "）&&（c == null || c ==" "））' – Andreas

として

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

は修正してください。ここで

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=="")

,オペレータは何もしません。それが最後の比較を返しますバグがあなたの他の条件

あなたはあなたのフォームを検証することができれば、この方法ではあり

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

出典

2017-01-10 06:56:56

javascriptの属性の追加と削除

答えて

関連する問題