2017-02-22 138 views
-1

我想检查我的姓氏元素是否具有“If”语句的信息,但我不知道该把它放在哪里,或者如果我正在讨论这个错误。目的是在我能够点击提交按钮之前最终检查是否所有的框都已填满。那么最好的方法去检查这个呢?检查表单中是否有信息

function check() { 
 
    let lastName = document.findElementById('last-name').value; 
 
    addressForm = document.shippingAddressForm; 
 

 

 
    addressForm.addEventListener('submit', (event) => { 
 
    event.preventDefault(); 
 

 
    }); 
 
    alert("Please enter all fields "); 
 

 
}
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JavaScript</title> 
 
    <link href="style.css" rel="stylesheet"> 
 
    <script src="main.js" defer></script> 
 
</head> 
 

 
<body> 
 
    <form id="shipping-address-form" name="shippingAddressForm" action="#" method="post"> 
 
    <h1>Shipping Address</h1> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="first-name">First Name:</label> 
 
     <input type="text" id="first-name" name="firstName" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="last-name">Last Name:</label> 
 
     <input type="text" id="last-name" name="lastName" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <label for="address">Address:</label> 
 
     <input type="text" id="address" name="address" /> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="city">City:</label> 
 
     <input type="text" id="city" name="city" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="state">State:</label> 
 
     <input type="state" id="state" name="state" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="zip-code">Zip Code:</label> 
 
     <input type="text" id="zip-code" name="zipCode" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="phone-number">Phone Number:</label> 
 
     <input type="text" id="phone-number" name="phoneNumber" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="email">Email:</label> 
 
     <input type="text" id="email" name="email" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="button"> 
 
     <button type="submit">Submit</button> 
 
    </div> 
 
    </form> 
 
</body>

+0

此链接可能会帮助https://www.w3schools.com/js/js_validation.asp –

+0

你也可以尝试使用'required'属性:HTTPS://www.w3schools的.com /标签/ att_input_required.asp –

回答

0

问题

你没有调用函数check()。你只定义它。

建议的解决方案

试试这个我删除的功能check()内容。这个例子只显示调用函数(但更好的是在需要HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input使用required属性页面的一半)

function check() { 
 
    
 
    alert("Please enter all fields "); 
 

 
}
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JavaScript</title> 
 
    <link href="style.css" rel="stylesheet"> 
 
    <script src="main.js" defer></script> 
 
</head> 
 

 
<body> 
 
    <form id="shipping-address-form" name="shippingAddressForm" action="#" method="post" onsubmit='check()'> 
 
    <h1>Shipping Address</h1> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="first-name">First Name:</label> 
 
     <input type="text" id="first-name" name="firstName" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="last-name">Last Name:</label> 
 
     <input type="text" id="last-name" name="lastName" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <label for="address">Address:</label> 
 
     <input type="text" id="address" name="address" /> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="city">City:</label> 
 
     <input type="text" id="city" name="city" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="state">State:</label> 
 
     <input type="state" id="state" name="state" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="zip-code">Zip Code:</label> 
 
     <input type="text" id="zip-code" name="zipCode" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
     <div> 
 
     <label for="phone-number">Phone Number:</label> 
 
     <input type="text" id="phone-number" name="phoneNumber" /> 
 
     </div> 
 

 
     <div> 
 
     <label for="email">Email:</label> 
 
     <input type="text" id="email" name="email" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="button"> 
 
     <button type="submit">Submit</button> 
 
    </div> 
 
    </form> 
 
</body>

而且,如果你想与FF

显示错误信息

错误消息

如果您希望Firefox出现自定义错误消息现场无法验证,您可以使用x-MOZ-errormessage的属性就行了:

<input type="email" 
x-moz-errormessage="Please specify a valid email address."> 
0

这里是该问题的老同学的解决方案:

工作小提琴:https://jsfiddle.net/almamun1996/k6n7ufou/19/

HTML:

<body> 
    <form id="shipping-address-form" name="shippingAddressForm" action="#" method="post"> 
     <h1>Shipping Address</h1> 

     <div class="flex-container"> 
      <div> 
      <label for="first-name">First Name:</label> 
      <input type="text" id="first-name" name="firstName" /> 
      </div> 

      <div> 
      <label for="last-name">Last Name:</label> 
      <input type="text" id="last-name" name="lastName" /> 
      </div> 
     </div> 

     <div class="flex-container"> 
      <label for="address">Address:</label> 
      <input type="text" id="address" name="address" /> 
     </div> 

     <div class="flex-container"> 
      <div> 
      <label for="city">City:</label> 
      <input type="text" id="city" name="city" /> 
      </div> 

      <div> 
      <label for="state">State:</label> 
      <input type="state" id="state" name="state" /> 
      </div> 

      <div> 
      <label for="zip-code">Zip Code:</label> 
      <input type="text" id="zip-code" name="zipCode" /> 
      </div> 
     </div> 

     <div class="flex-container"> 
      <div> 
      <label for="phone-number">Phone Number:</label> 
      <input type="text" id="phone-number" name="phoneNumber" /> 
      </div> 

      <div> 
      <label for="email">Email:</label> 
      <input type="text" id="email" name="email" /> 
      </div> 
     </div> 

     <div class="button"> 
      <input type="button" id="btnSubmit" onclick="check()" value="Submit"/> 
     </div> 
     </form> 
</body> 

JS:

function check() { 
    if(document.getElementById('first-name').value == null || document.getElementById('first-name').value.trim() == ''){ 
    alert("Please enter first-name "); 
    document.getElementById("first-name").focus(); 
    return false; 
    } 
    if(document.getElementById('last-name').value == null || document.getElementById('last-name').value.trim() == ''){ 
    alert("Please enter last-name "); 
    document.getElementById("last-name").focus(); 
    return false; 
    } 
    if(document.getElementById('address').value == null || document.getElementById('address').value.trim() == ''){ 
    alert("Please enter address "); 
    document.getElementById("address").focus(); 
    return false; 
    } 
    if(document.getElementById('city').value == null || document.getElementById('city').value.trim() == ''){ 
    alert("Please enter city "); 
    document.getElementById("city").focus(); 
    return false; 
    } 
    if(document.getElementById('state').value == null || document.getElementById('state').value.trim() == ''){ 
    alert("Please enter state "); 
    document.getElementById("state").focus(); 
    return false; 
    } 
    if(document.getElementById('zip-code').value == null || document.getElementById('zip-code').value.trim() == ''){ 
    alert("Please enter zip-code "); 
    document.getElementById("zip-code").focus(); 
    return false; 
    } 
    if(document.getElementById('phone-number').value == null || document.getElementById('phone-number').value.trim() == ''){ 
    alert("Please enter phone-number "); 
    document.getElementById("phone-number").focus(); 
    return false; 
    } 
    if(document.getElementById('email').value == null || document.getElementById('email').value.trim() == ''){ 
    alert("Please enter email "); 
    document.getElementById("email").focus(); 
    return false; 
    } 
alert('Form validated'); 
}