堆棧內存溢出
  簡體   English   中英

直到所有必填字段都填滿后，如何使JavaScript警報不運行

[英]how to make javascript alert not run until all required fields are filled

 原文  2014-10-03 12:23:54  1   2    javascript/ html

問題描述

我已經創建了一個注冊表單。 我是Web開發的新手，我需要一些幫助。 問題是當我按下提交按鈕時。 javascript警報運行。 即使所有字段都未填寫，我也要等到所有必填字段都填滿后才能運行JavaScript提醒（即Data（）函數）。

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>

2 個解決方案

解決方案1
 0 已采納  2014-10-03 12:26:33

試試看： 

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

並從提交按鈕中刪除： 

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

說明：

當您使用“ click ”按鈕時，它將始終觸發，因為它是單擊的。 如果您在表單上使用submit ，則僅在提交表單時才會觸發它，這表示它是正確的並且已填寫所有必填字段

更新

如果您想運行一些其他的自定義驗證（例如密碼確認），並且發現表單無效並想要停止提交過程，請使用以下提示： 

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();
    }
}

解決方案2
 0  2014-10-03 12:37:09

您應該檢查以確保每個文本框都帶有一系列if else語句。

例如 

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('');
            }
        }
    }
}

在致電警報之前，只需驗證您的文本字段不為空即可。 將您的提交按鈕類型從“提交”更改為“按鈕”。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript禁用按鈕，直到所有字段都填滿 如何禁用按鈕，直到不使用JavaScript（僅HTML5和CSS）填充必填字段 如何制作需要填充的對象中的所有字段或根本不填充對象中的任何字段？ 如何禁用按鈕，直到僅使用 JavaScript 填充所有輸入字段？ 填寫完所有字段后如何提交JavaScript 填寫所有必填字段時如何防止默認提交 如何禁用按鈕直到所有必填字段都已填寫 如何檢查是否填寫了所有必填字段以啟用提交按鈕？ javascript-將表格上的所有字段設為必填 檢查是否在特定的div中填寫了所有必填字段
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM