入力要素が空でもHTMLフォームが送信されます

私はHTMLフォームを持っていますが、JavaScriptを使用してフォームの送信を停止するにはJavaScriptを使用しますが、空の。入力要素が空でもHTMLフォームが送信されます

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Sign Up</title> 
    <script type="text/javascript"> 
     function validate() { 


     var fname = document.forms["form1"]["fname"].value; 
     var lname = document.forms["form1"]["lname"].value; 
     var ID = document.forms["form1"]["ID"].value; 
     var Password = document.forms["form1"]["Password"].value; 

     if(fname == null || lname == null || ID == null || Password == null) 
     { 
      alert("Please enter all the fields"); 
      return false; 
     }; 

    } 
    </script> 

</head> 
<body style = "font-family: Lato"> 

    <div style="padding-left: 10%"> 
    <h1>Welcome to my site</h1><br> 
    </div> 
    <div style="text-align: center"> 
     <form name="form1" onsubmit="return validate()" method = "post" id="form1" action = "http://127.0.0.1:2906/success" style="padding-top: 2%"> 
      <label id="user" style="font-size: 20px">Username</label><br> 
      <input type="text" name = "ID" placeholder = "Username" style = "padding-left: 0.2%;"><br><br> 
      <label style="font-size: 20px">First name</label><br> 
      <input type="text" name = "fname" id="fname" placeholder = "First name" style = "padding-left: 0.2%"><br><br> 
      <label style="font-size: 20px">Last name</label><br> 
      <input type="text" name = "lname" placeholder = "Last name" style = "padding-left: 0.2%"><br><br> 
      <label style="font-size: 20px">Password</label><br> 
      <input type = "password" name = "Password" placeholder = "Password" style = "padding-left: 0.2%"><br><br><br> 
      <input type = "submit" value = "Sign up" style="width:10%;height: 40px"> 
     </form> 
    </div> 

</body> 
</html>

出典

2016-12-11 Gautham

問題は、input.valueは常に文字列を返します。フィールドが記入されていない場合、その値は空文字列''になります。これは、ゆるやかにnullに等しくありません。代わりに!valueを使用してください。これは、空の文字列で機能します。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Sign Up</title> 
 
    <script type="text/javascript"> 
 
     function validate() { 
 

 

 
     var fname = document.forms["form1"]["fname"].value; 
 
     var lname = document.forms["form1"]["lname"].value; 
 
     var ID = document.forms["form1"]["ID"].value; 
 
     var Password = document.forms["form1"]["Password"].value; 
 

 
     if(!fname || !lname || !ID || !Password) 
 
     { 
 
      alert("Please enter all the fields"); 
 
      return false; 
 
     }; 
 

 
    } 
 
    </script> 
 

 
</head> 
 
<body style = "font-family: Lato"> 
 

 
    <div style="padding-left: 10%"> 
 
    <h1>Welcome to my site</h1><br> 
 
    </div> 
 
    <div style="text-align: center"> 
 
    <form name="form1" onsubmit="return validate()" method = "post" id="form1" action = "http://127.0.0.1:2906/success" style="padding-top: 2%"> 
 
     <label id="user" style="font-size: 20px">Username</label><br> 
 
     <input type="text" name = "ID" placeholder = "Username" style = "padding-left: 0.2%;"><br><br> 
 
     <label style="font-size: 20px">First name</label><br> 
 
     <input type="text" name = "fname" id="fname" placeholder = "First name" style = "padding-left: 0.2%"><br><br> 
 
     <label style="font-size: 20px">Last name</label><br> 
 
     <input type="text" name = "lname" placeholder = "Last name" style = "padding-left: 0.2%"><br><br> 
 
     <label style="font-size: 20px">Password</label><br> 
 
     <input type = "password" name = "Password" placeholder = "Password" style = "padding-left: 0.2%"><br><br><br> 
 
     <input type = "submit" value = "Sign up" style="width:10%;height: 40px"> 
 
    </form> 
 
    </div> 
 

 
</body> 
 
</html>

出典

2016-12-11 08:50:55 gyre

これを試してみてください：

<script type="text/javascript"> 
     function validate() { 


     var fname = document.forms["form1"]["fname"].value; 
     var lname = document.forms["form1"]["lname"].value; 
     var ID = document.forms["form1"]["ID"].value; 
     var Password = document.forms["form1"]["Password"].value; 

     if(!fname || !lname || !ID || !Password || fname!='' || lname!='' || ID!='' || Password!='') 
     { 
      alert("Please enter all the fields"); 
      return false; 
     }; 
    }

出典

2016-12-11 08:52:38

はい、単に空の文字列をチェックします。例

if($("#elementId").val()==""){ 
    alert(" please fill username"); 
    return false; 
}

出典

2016-12-11 09:36:17

入力要素が空でもHTMLフォームが送信されます

答えて

関連する問題