Question

这是我的第一个涉及表单验证的真实项目。我正在解决一个我无法找到解决方案的问题。

目标是这样，有一个继续按钮，一旦所有字段输入都被传递为有效，它将被激活。我通过创建单独的变量来解决这个问题，所有这些变量最初都设置为false，专门用于检查每个输入字段。当用户输入正确的验证数据时，该变量设置为true。

然后我运行一个if语句来检查所有变量是否都设置为true，如果是，我激活continue按钮，单击该按钮，将表单的下一部分滑入页面。

HTML：

<div class="container">

    <h3>Step 3: Your Details</h3>

    <!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->

    <div class="row chosenmembership">

    <div class="col-md-12 text-center" id="yourdetails">

        <form action="" method="">

            <div class="form-group">
                <label for="email">Email:</label>
                <input type="text" placeholder="Email Address" id="email" class="form-control your-details">
                <span class="warning" id="email-warning"></span>
            </div>

                <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" placeholder="Full Name" id="name" class="form-control your-details">
                <span class="warning" id="name-warning"></span>
                </div>


                <div class="form-group">
                <label for="number">Contact Number:</label>
                <input type="text" placeholder="Contact Number" id="number" class="form-control your-details">
                <span class="warning" id="number-warning"></span>
                </div>

                <div class="form-group">
                <label for="dob">Date of Birth:</label>
                <input type="date" id="dob" class="form-control your-details">
                <span class="warning" id="dob-warning"></span>
                </div>

                        </form>


                <input type="submit" id="submit" value="CONTINUE">



    </div>

</div>

</div>

JAVASCRIPT / JQUERY：

//collection of input form fields//
    var formSubmit = $("#submit");
    var emailField = $("#email");
    var nameField = $("#name");
    var numberField = $("#number");

    //Switch to true when each validation has passed//
    emailValidated = false;
    nameValidated = false;
    numberValidated = false;

    //email validation check//
    emailField.on("input",function(){
        var emailInput = $(this).val()
        var testExp = new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/);
        if (emailInput < 1) {
            $("#email-warning").html("Email is required!");
            $("#email-warning").css("visibility","visible");
            emailValidated = false;
        }

        else if (!testExp.test(emailInput)){
            $("#email-warning").html("Please enter a valid email");
            $("#email-warning").css("visibility","visible");
            emailValidated = false;

        }   else {
            $("#email-warning").css("visibility","hidden");
            emailValidated = true;
        }

        })

    //name validation check//
    nameField.on("input",function(){
        var nameInput = $(this).val()
        if (nameInput < 1) {
            $("#name-warning").html("Name is required");
            $("#name-warning").css("visibility","visible");
            nameValidated = false;
        } else {
            $("#name-warning").css("visibility","hidden");
            nameValidated = true;
        }

        })

    //contact number validation check//
    numberField.on("input",function(){
        var numberInput = $(this).val()

        if (typeof numberInput !== "number" && numberInput.length < 9) {
            $("#number-warning").html("Please enter a valid number");
            $("#number-warning").css("visibility","visible");
            numberValidated = false;
        } else {
            $("#number-warning").css("visibility","hidden");
            numberValidated = true;
        }

        })

    if (emailValidated && nameValidated && numberValidated){
        alert("correct");
        }


    })

目前，我只是使用警报提示来测试它是否正常工作，但它失败了。

如前所述，这是我第一次真正的表单验证。任何其他提示或建议将不胜感激。感谢您的帮助。

Answer 1

我通过复制粘贴代码片段找到了一些东西。 1有一个结尾“}）”没有开始$（文件）.ready（function（）{“。2你的”.on“语句都没有结尾的半冒号。

这是我的javascript，其中包含一些小改动

$(document).ready(function () {
    //collection of input form fields//
    var formSubmit = $("#submit");
    var emailField = $("#email");
    var nameField = $("#name");
    var numberField = $("#number");

    //Switch to true when each validation has passed//
    emailValidated = false;
    nameValidated = false;
    numberValidated = false;

    //email validation check//
    emailField.on("input", function () {
        var emailInput = $(this).val()
        var testExp = new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/);
        if (emailInput < 1) {
            $("#email-warning").html("Email is required!");
            $("#email-warning").css("visibility", "visible");
            emailValidated = false;
        }

        else if (!testExp.test(emailInput)) {
            $("#email-warning").html("Please enter a valid email");
            $("#email-warning").css("visibility", "visible");
            emailValidated = false;

        } else {
            $("#email-warning").css("visibility", "hidden");
            emailValidated = true;
            enableContinue();
        }

    });

    //name validation check//
    nameField.on("input", function () {
        var nameInput = $(this).val()
        if (nameInput < 1) {
            $("#name-warning").html("Name is required");
            $("#name-warning").css("visibility", "visible");
            nameValidated = false;
        } else {
            $("#name-warning").css("visibility", "hidden");
            nameValidated = true;
            enableContinue();
        }

    });

    //contact number validation check//
    numberField.on("input", function () {
        var numberInput = $(this).val()

        if (typeof numberInput !== "number" && numberInput.length < 9) {
            $("#number-warning").html("Please enter a valid number");
            $("#number-warning").css("visibility", "visible");
            numberValidated = false;
        } else {
            $("#number-warning").css("visibility", "hidden");
            numberValidated = true;
            enableContinue();
        }

    });

    enableContinue = function () {
        if (emailValidated && nameValidated && numberValidated) {
            $('#submit').prop('disabled', false);
        }
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

    <h3>Step 3: Your Details</h3>

    <!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->

    <div class="row chosenmembership">

        <div class="col-md-12 text-center" id="yourdetails">

            <form action="" method="">

                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="text" placeholder="Email Address" id="email" class="form-control your-details">
                    <span class="warning" id="email-warning"></span>
                </div>

                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" placeholder="Full Name" id="name" class="form-control your-details">
                    <span class="warning" id="name-warning"></span>
                </div>


                <div class="form-group">
                    <label for="number">Contact Number:</label>
                    <input type="text" placeholder="Contact Number" id="number" class="form-control your-details">
                    <span class="warning" id="number-warning"></span>
                </div>

                <div class="form-group">
                    <label for="dob">Date of Birth:</label>
                    <input type="date" id="dob" class="form-control your-details">
                    <span class="warning" id="dob-warning"></span>
                </div>

            </form>


            <input type="submit" class="btn btn-primary" id="submit" disabled="disabled" value="CONTINUE">



        </div>

    </div>

</div>

一旦所有字段都有值，您的表单CONTINUE按钮就会启用。注意：我没有尝试改进你的javascript，只是让它工作。

Answer 2

现在你在脚本中同步检查验证变量，所以它们都是假的。表单提交后，您必须异步检查它们。只需添加事件监听器以表单提交以检查如下变量：

document.getElementById('#form').addEventListener('submit', function(){
    if (emailValidated && nameValidated && numberValidated){
      alert("correct");
    }
});

不要忘记为您的表单设置ID。

Answer 3

如果您利用一些内置的HTML5表单验证，您可以节省大量工作。 https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

只要现有字段有效，每次提交表单时，此简单示例都会添加一个新字段。您需要测试表单的状态，以查看是否应该添加其他部分或提交。

$('form').on('submit', function() {
  $(this).find('fieldset').append('<input type="text" required />');
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <input type="text" required />
  </fieldset>
  <input type="submit" id="submit" value="continue" />
</form>

使用jquery / javascript格式验证问题

3 个答案: