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

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>

我的 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

支持所有浏览器