Question

我正在处理这些表单，我希望当我点击提交按钮时，只有该字段变为红色且为空。不知道怎么解决它。如果有人可以帮助我我新的javascript和jquery谢谢

我的HTML

<form id="form">
                  <div class="form-group">
                    <label>Username</label>
                    <p><span id="usernameError"></span></p>
                    <input type="text" class="form-control" id="username" placeholder="Username">
                  </div>
                  <div class="form-group">
                    <label>Email</label>
                    <p><span id="emailError"></span></p>
                    <input type="email" class="form-control" id="email" placeholder="email">
                  </div>
                  <div class="form-group">
                    <label>Password</label>
                    <p><span id="passwordError"></span></p>
                    <input type="password" class="form-control" id="password" placeholder="Password">
                  </div>
                  <div class="form-group">
                    <label>Confirm Password</label>
                    <p><span id="confPasswordError"></span></p>
                    <input type="password" class="form-control" id="confPassword" placeholder="Confirm Password">
                  </div>
                  <p><span id="warning"></span></p>
                  <button type="submit" id="submit" class="btn btn-default">Submit</button>
                </form>

MY JAVASRIPT

现在就是这种情况。我将所有变量放在一个if语句中，这就是为什么它们都变成了红色

  $("#form").submit(function(){

    if(password.val() != confPassword.val() )
    {
        alert("password dont match");
    }

    if($(this).val() == ""){

        username.addClass("border");
        email.addClass("border");
        password.addClass("border");
        confPassword.addClass("border");

        // warning message
        message.text("PLEASE FILL OUT ALL THE FIELDS").addClass("boldred");

        // errors rendering 
        usernameError.text("username must be defined").addClass("red");
        emailError.text("email must be valid and defined").addClass("red");
        passwordError.text("password must be defined").addClass("red");
        confPasswordError.text("confirm password must be matched and defined").addClass("red");

        // disabling submit button 

        submit.attr("disabled" , "disabled");

        return false;

    }

    else{
        return true;
    }

});

Answer 1

尝试使用JQuery验证引擎。它很容易实现您的表单。 Validation Engine

支持所有浏览器

Answer 2

首先尝试将required添加到所有必填字段，例如：

<input type="text" class="form-control" id="username" placeholder="Username" required>

然后禁用（或删除）if子句。如果这不起作用，请在评论中告诉我，我会更新答案。

Answer 3

您正在以不正确的方式解决问题。

在表单提交上，您需要单独检查所需的每个字段。

例如：

$("#form").on('submit', function() {
    var submit = true;
    $(this).find('span').removeClass('red');
    $(this).find('input').each(function() {
        if ($.trim($(this).val()) === '') {
            submit = false;
            $(this).parents('.form-group').find('span').addClass('red');
        }
    });
    return submit;
});

JQuery表单验证无法正常工作需要修复？

3 个答案: