如何使JavaScript警告不運行，直到填寫所有必填字段

我已創建了註冊表單。我需要一些幫助，因爲我是web開發新手。問題是，當我按下提交按鈕。 JavaScript警報運行。即使所有字段都沒有填充。我希望這個JavaScript警報（這是函數Data（））不會運行，直到填寫所有必填字段。如何使JavaScript警告不運行，直到填寫所有必填字段

JavaScript代碼

<script> 
    function Data() { 
     alert("User ID: " + textfield1.value + '\n' + "Password: " + textfield2.value + '\n' + "Conform Password: " + textfield3.value + '\n' + "First Name: " + textfield4.value + '\n' + "Last Name: " + textfield5.value + '\n' + "Email: " + textfield6.value + '\n' + "Company: " + textfield7.value + '\n' + "Phone: " + textfield8.value + '\n' + "Fax: " + textfield9.value + '\n' + "Address Line 1: " + textfield10.value + '\n' + "Address Line 2: " + textfield11.value + '\n' + "City: " + textfield12.value + '\n' + "State/Province: " + textfield13.value + '\n' + "Country: " + textfield14.value + '\n' + "Zip/Postal Code: " + textfield15.value + '\n'); 
     { 
      if (input.value != document.getElementById('password').value) { 
       alert('Password Must be Matching.'); 
      } else { 
       // input is valid -- reset the error message 
       input.setCustomValidity(''); 
      } 
     } 
    } 
    function inputnumber(evt) { 
     var limit = (evt.which) ? evt.which : event.keyCode 
     if (limit > 31 && (limit < 48 || limit > 57)) { 
      alert("Enter numerals only in this field."); 
      return false; 
     } 

     return true; 
    } 
    function checkPass() { 
     var inputpassword = document.getElementById("textfield2"); 
     var conformpassword = document.getElementById("textfield3"); 
     var message = document.getElementById("confirmMessage"); 
     var goodpassword = "#66cc66"; 
     var badpassword = "#ff6666"; 
     if (inputpassword.value == conformpassword.value) { 
      conformpassword.style.borderColor = goodpassword; 
      message.style.color = goodpassword; 
      message.innerHTML = "Password Match!" 
     } 
     else { 
      conformpassword.style.borderColor = badpassword; 
      message.style.color = badpassword; 
      message.innerHTML = "Password Do Not Match!" 
     } 
    } 


</script> 


<body> 
<form autocomplete="on"> 
<h1 style="text-align: center"> 
    Signup Form</h1> 
<table align="center"> 
    <tr> 
     <td> 
      User ID 
     </td> 
     <td> 
      <input type="text" id="textfield1" style="border-radius: 7px; border: 2px solid #dadada;" 
       autofocus required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Password<sup>*</sup> 
     </td> 
     <td width="50%"> 
      <input type="password" maxlength="10" id="textfield2" style="border-radius: 7px; 
       border: 2px solid #dadada;" required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Conform Password 
     </td> 
     <td> 
      <input type="password" maxlength="10" id="textfield3" onkeyup="checkPass()" style="border-radius: 7px; 
       border: 2px solid #dadada;" required /><span id="confirmMessage"></span> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      First Name 
     </td> 
     <td> 
      <input type="text" id="textfield4" style="border-radius: 7px; border: 2px solid #dadada;" 
       required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Last Name 
     </td> 
     <td> 
      <input type="text" id="textfield5" style="border-radius: 7px; border: 2px solid #dadada;" 
       required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Email 
     </td> 
     <td> 
      <input type="email" id="textfield6" style="border-radius: 7px; border: 2px solid #dadada;" 
       required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Company 
     </td> 
     <td> 
      <input type="text" id="textfield7" style="border-radius: 7px; border: 2px solid #dadada;" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Phone 
     </td> 
     <td> 
      <input type="text" id="textfield8" onkeypress="return inputnumber(event)" style="border-radius: 7px; 
       border: 2px solid #dadada;" required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Fax 
     </td> 
     <td> 
      <input type="text" id="textfield9" onkeypress="return inputnumber(event)" style="border-radius: 7px; 
       border: 2px solid #dadada;" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Address Line 1 
     </td> 
     <td> 
      <input type="text" id="textfield10" style="border-radius: 7px; border: 2px solid #dadada;" 
       required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Address Line 2 
     </td> 
     <td> 
      <input type="text" id="textfield11" style="border-radius: 7px; border: 2px solid #dadada;" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      City 
     </td> 
     <td> 
      <input type="text" id="textfield12" style="border-radius: 7px; border: 2px solid #dadada;" 
       required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      State/Province 
     </td> 
     <td> 
      <input type="text" id="textfield13" style="border-radius: 7px; border: 2px solid #dadada;" 
       required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Country 
     </td> 
     <td> 
      <input type="text" id="textfield14" style="border-radius: 7px; border: 2px solid #dadada;" 
       required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Zip/Postal Code 
     </td> 
     <td> 
      <input type="text" id="textfield15" onkeypress="return inputnumber(event)" style="border-radius: 7px; 
       border: 2px solid #dadada;" required /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div align="center"> 
       <input type="submit" value="Submit!" onclick="Data()" style="border-radius: 7px; 
        border: 2px solid #dadada;" /></div> 
     </td> 
     <td> 
      <div align="center"> 
       <input type="reset" value="Reset" style="border-radius: 7px; border: 2px solid #dadada;" /></div> 
     </td> 
    </tr> 
</table> 
</form>

來源

2014-10-03 Asif Ameer

試一下：

<form autocomplete="on" onsubmit="Data()">

，並刪除從提交按鈕：

<input type="submit" value="Submit!" style="border-radius: 7px;border: 2px solid #dadada;" />

說明：

當您在按鈕上使用click時，它會一直點亮，因爲它是點擊。如果您使用的形式submit，則僅提交表單時發射，這意味着它是正確的，並擁有所有必需的字段填寫

UPDATE

在情況下，如果你想運行其他一些自定義的驗證（如密碼確認），並找到形成無效，並要停止提交過程中，使用此提示：

function Data(e) { //"e" - is an event object, that is being populated on form's submit 
    if (input.value != document.getElementById('password').value) { 
     alert('Password Must be Matching.'); 
     e.stopPropagation(); //These two rows KILL the event, so it will not be submited 
     e.preventDefault(); 
    } 
}

來源

2014-10-03 12:26:33 jevgenig

是的它正在工作....一個更多的事情..它對無效的密碼工作我的意思是如果密碼不匹配它仍然工作...請解決這個問題 – 2014-10-03 12:38:00

檢查更新的版本 – jevgenig 2014-10-03 12:46:53

你應該檢查，以確保每一個文本框，在它與一系列if else語句的東西。

Ex。

if(!document.getElementById("yourtextbox").value.match(/\S/)) 
{ 
    window.alert("You must enter a value for yourtextbox"); 
} 
else 
{ 
    if(!document.getElementById("anothertextbox").value.match(/\S/)) 
    { 
     window.alert("You must enter a value for anothertextbox"); 
    } 
    else 
    { 


     alert("User ID: " + textfield1.value + '\n' + "Password: " + textfield2.value + '\n' + "Conform Password: " + textfield3.value + '\n' + "First Name: " + textfield4.value + '\n' + "Last Name: " + textfield5.value + '\n' + "Email: " + textfield6.value + '\n' + "Company: " + textfield7.value + '\n' + "Phone: " + textfield8.value + '\n' + "Fax: " + textfield9.value + '\n' + "Address Line 1: " + textfield10.value + '\n' + "Address Line 2: " + textfield11.value + '\n' + "City: " + textfield12.value + '\n' + "State/Province: " + textfield13.value + '\n' + "Country: " + textfield14.value + '\n' + "Zip/Postal Code: " + textfield15.value + '\n'); 
     { 
      if (input.value != document.getElementById('password').value) { 
       alert('Password Must be Matching.'); 
      } else { 
       // input is valid -- reset the error message 
       input.setCustomValidity(''); 
      } 
     } 
    } 
}

只需在調用警報之前確認您的文本字段不爲空即可。將您的提交按鈕類型從「提交」更改爲「按鈕」。

來源

2014-10-03 12:37:09 brso05

如何使JavaScript警告不運行，直到填寫所有必填字段

回答

相關問題