javascript输入HTML输入复选框

Question

I have created a simple payment form using HTML/CSS/JS and i want to make checks of what the user gives as inputs using html patterns. 我使用HTML / CSS / JS创建了一个简单的付款表单，我想检查用户使用html模式输入的内容。 But i also want to create a pop up alert using JS to confirm the form which must pop after all required inputs are filled correctly and patterns are ok.The pop up alert must also contain the name the user provided and return it.But the problem is that when i press submit button, even though the required info is not filled, the alert does come up and says "Order Completed" ....How can i make the pop up come up only after all info is given correctly?Here is my code: 但我也想使用JS创建一个弹出警报，以确认必须正确填写所有必需输入且模式正常之后必须弹出的表单。该弹出警报还必须包含用户提供的名称并返回它。是当我按下“提交”按钮时，即使未填写必填信息，警报仍会出现并显示“订单已完成”...。仅在正确提供所有信息后，如何才能弹出窗口？是我的代码：

<!DOCTYPE html>
<html>
<style>


    body {

        border:10px solid black;
        margin-top: 100px;
        margin-bottom: 100px;
        margin-right: 150px;
        margin-left: 150px;

    }


    p.thick {
        font-weight: bold;
    }


    input[type=text], select {
        width: 100%;
        padding: 20px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    input[type=text]:focus {
        border: 3px solid #555;
    }

    input[type=password]:focus {
        border: 3px solid #555;
    }

    input[type=password], select {
        width: 100%;
        padding: 20px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input[type=submit] {
        width: 100%;
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type=submit]:hover {
        background-color: red;
    }

    div {
        border-radius: 5px;
        background-color:rgb(238, 238, 232);
        padding: 40px;
    }
</style>

<body onload="CreditCard();">
    <form id="Myform">
        <div class="login-page">
            <div class="form">


                <fieldset>
                    <h1>Log in </h1>
                    <p>Username*: <input type="text"  name="Username" pattern=".{3,}" title="3 or more characters"></p>
                    <p>Password*: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[A-Z]).{5,}"placeholder="Password must contain 1 uppercaser and 1 number and must be atleast 5 digits." title="Must contain at least one number and one uppercase letter, and at least 5 or more characters."></p>



                </fieldset>

                <fieldset>
                    <h1> Payment </h1>
                    <select id="paymentmethod" onchange="CreditCard();">
                        <option value ="Payment on pickup">Payment on pickup</option>
                        <option value="Bank transfer/deposit">Bank transfer/deposit</option>
                        <option value="Credit/Debit card">Credit/Debit card</option>

                    </select>
                    <fieldset>
                        <div id="credit/debit card" style="display: block;">
                            <select name="cardtype" class="form">
                                <option value="VISA">VISA</option>
                                <option value="MasterCard">MasterCard</option>
                            </select>
                            <br>Card Number*:<br>
                            <input type="text" name="cardnumber" pattern="(?=.*\d).{16,16}" title="Enter a 16-digit card number please."  style="width:80%;" maxlength="20" value="" required>

                            <tr> 
                                <td height="22" align="right" valign="middle">Expiry Date:</td>
                                <td colspan="2" align="left">
                                    <SELECT NAME="CCExpiresMonth" >  
                                        <OPTION VALUE="01">January (01)
                                        <OPTION VALUE="02">February (02)
                                        <OPTION VALUE="03">March (03)
                                        <OPTION VALUE="04"SELECTED>April (04)
                                        <OPTION VALUE="05">May (05)
                                        <OPTION VALUE="06">June (06)
                                        <OPTION VALUE="07">July (07)
                                        <OPTION VALUE="08">August (08)
                                        <OPTION VALUE="09">September (09)
                                        <OPTION VALUE="10">October (10)
                                        <OPTION VALUE="11">November (11)
                                        <OPTION VALUE="12">December (12)
                                    </SELECT> 
                                    <SELECT NAME="CardExpiresYear">
                                        <OPTION VALUE="04"SELECTED>2016
                                        <OPTION VALUE="05">2017
                                        <OPTION VALUE="06">2018
                                        <OPTION VALUE="07">2019
                                        <OPTION VALUE="08">2020
                                        <OPTION VALUE="09">2021
                                        <OPTION VALUE="10">2022
                                        <OPTION VALUE="11">2023
                                        <OPTION VALUE="12">2024
                                        <OPTION VALUE="13">2025

                                    </SELECT>
                                </td>
                            </tr>
                    </fieldset>

                </fieldset>








                <h1> Order Information </h1>
                <p class="thick"> Name*: </p> <input type="text" id="customername"  style="width:55% name="cardholder" value="" pattern=".{1,}" title="Please enter a name" required>


                                                     <p class="thick"> Adress*: </p> <input type="text"style="width:55;" name="cardholderadr" value="" pattern=".{3,}" title="Please enter an adress" required>

                <p class="thick"> Phone </p> <input type="text"style="width:55;"  pattern="(?=.*\d).{10,10}" title="Enter a 10 digit number please." name="cardholderpho" value="" >

                <p class="thick"> email <input type="text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="Please enter a valid email adress" placeholder="example@email.com" >

                <p class="thick"> Delivery comments </p> <input type="text" style="width:55; padding: 50px ;" name="cardholdercomm" value="" >


                <p style="color:blue;"> I agree with the <a href="https://en.wikipedia.org/wiki/Terms_of_service">
                        *terms</a>  <input type="radio" name="terms" title="Please agree to our terms."  unchecked required onclick="terms();"></p>
                <input type="submit" value="Submit" onclick="confirmed();">
                <input type="button" onclick="reset()" value="Reset form">


            </div>

        </div>

    </form>
    <script>
        function CreditCard() {
            prefer = document.forms[0].paymentmethod.value;
            if (prefer == "Credit/Debit card") {
                document.getElementById("credit/debit card").style.visibility = "visible";
            } else {
                document.getElementById("credit/debit card").style.visibility = "hidden";
            }

        }
        function paymentwithcard() {
            document.getElementById("credit/debit card").style.visibility = "hidden";
        }

        function reset() {
            document.getElementById("Myform").reset();


        }

        function confirmed() {

            var x = document.getElementById("customername").value;
            alert("Order completed.Name used:" + x);
        }
        function terms() {


        }
    </script>

</body>


</html>

Focus on the inputs and the function confirmed(). 专注于输入和函数Confirmed（）。

Answer 1

The submit method executes when you press submit. 当您按Submit时，将执行commit方法。 First you have to let the submit method wait that the comfirm method can execute, after it the submit method can be executed. 首先，必须让submit方法等待comfirm方法可以执行，然后再执行submit方法。 To accessing the attribute in your js you can use an id. 要访问js中的属性，可以使用id。

 document.getElementById('submit-form').submit(function(ev) { ev.preventDefault(); // to stop the form from submitting confirmed(); this.submit(); // If confirmed succeeded });

 <input id="submit-form" type="submit" value="Submit">

Answer 2

You are listening onclick , instead, you should listen for the submit event 您正在监听onclick ，相反，您应该监听Submit事件
Don't only rely on client-side validation, it's good for a clean UX but never trust the client 不仅依赖客户端验证，对于干净的UX很有用，但永远不要信任客户端
HTML5 provides some validation options in the form of the required and pattern attributes HTML5以必填属性和模式属性的形式提供了一些验证选项

window.addEventListener('load', function () {
    document.getElementById('example-submit').addEventListener('submit', function () {
        alert('done');
    });
});

input:invalid {border: 1px solid red;}
input:valid {border: 1px solid green;}

<form action="?" method="post">
  <input type="text" id="expire-year" required pattern="20[123]\d" placeholder="YYYY" />
  <input type="text" id="expire-month" required pattern="0?[1-9]|1[012]" placeholder="MM" />
  <input type="text" id="expire-day" required pattern="0?[1-9]|2\d|3[01]" placeholder="DD" />
  <input type="submit" id="example-submit" />
</form>

Side notes 旁注

In your code, CreditCard isn't a constructor. 在您的代码中， CreditCard不是构造函数。 Consider using a cammel case name creditCard instead 考虑改用cammel案例名称creditCard
Try to cut down the code in your question to the bare minimum/example case if you want good quality answers, nearly all of the HTML provided is irrelevant to the question 如果您想获得高质量的答案，请尝试将问题中的代码缩减为最少的示例/示例，几乎所有提供的HTML都与问题无关
I didn't use a snippet because the embedded iframe here on SO doesn't let you submit forms :) 我没有使用任何代码段，因为SO上的嵌入式iframe不允许您提交表单:)

Answer 3

To prevent form from submitting you need to change `onclick attribute 为了防止表单提交，您需要更改`onclick属性

<input type="submit" value="Submit" onclick="return confirmed();">

and your function must return true or false depending on your form validation. 并且您的函数必须根据表单验证返回true或false。

javascript输入HTML输入复选框

问题描述

3 个解决方案

解决方案1
2 2016-05-21 18:00:45

解决方案2
1 2016-05-21 18:06:19

解决方案3
1 已采纳 2016-05-21 18:06:39

javascript输入HTML输入复选框

问题描述

3 个解决方案

解决方案1 2 2016-05-21 18:00:45

解决方案2 1 2016-05-21 18:06:19

解决方案3 1 已采纳 2016-05-21 18:06:39

解决方案1
2 2016-05-21 18:00:45

解决方案2
1 2016-05-21 18:06:19

解决方案3
1 已采纳 2016-05-21 18:06:39