直到所有必填字段都填满后，如何使JavaScript警报不运行

Question

I have created a Signup form. 我已经创建了一个注册表单。 I need some help as i am new to web development. 我是Web开发的新手，我需要一些帮助。 The Problem is that When I press submit button. 问题是当我按下提交按钮时。 javascript alert runs. javascript警报运行。 even when all fields are not filled.I want that javascript alert (which is function Data()) not run until all required fields are filled. 即使所有字段都未填写，我也要等到所有必填字段都填满后才能运行JavaScript提醒（即Data（）函数）。

JavaScript Code 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>

Answer 1

Try that: 试试看：

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

And remove that from submit button: 并从提交按钮中删除：

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

Explanation: 说明：

When you use click on button, it will always fire, because it's click. 当您使用“ click ”按钮时，它将始终触发，因为它是单击的。 If you use submit on form, then it is fired only when form is submitted, which means it's correct and has all required fields filled 如果您在表单上使用submit ，则仅在提交表单时才会触发它，这表示它是正确的并且已填写所有必填字段

UPDATE 更新

In case if you want to run some additional custom validation (like password confirmation), and find form invalid and want to STOP submit process, use this hint: 如果您想运行一些其他的自定义验证（例如密码确认），并且发现表单无效并想要停止提交过程，请使用以下提示：

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

Answer 2

You should check to make sure each textbox has something in it with a series of if else statements. 您应该检查以确保每个文本框都带有一系列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('');
            }
        }
    }
}

Just validate that your text fields are not empty before calling your alert. 在致电警报之前，只需验证您的文本字段不为空即可。 Change your submit button type from "submit" to "button". 将您的提交按钮类型从“提交”更改为“按钮”。

直到所有必填字段都填满后，如何使JavaScript警报不运行

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-10-03 12:26:33

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

直到所有必填字段都填满后，如何使JavaScript警报不运行

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-10-03 12:26:33

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

解决方案1
0 已采纳 2014-10-03 12:26:33

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