JQuery表單驗證工作不正常需要修復？

我正在使用窗體，我想要當我點擊提交buttom只有該字段變爲空的紅色。不知道如何解決它。如果有人能幫助我，我新的JavaScript和jQuery感謝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; 
    } 

});

來源

2015-07-03 Daniel

你使用jQuery嗎？或者你只有JavaScript選項？ –

首先嚐試加入required所有必要的字段，如：

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

，然後停用（或刪除） if條款。如果這不起作用，請在評論中告訴我，我會更新答案。

來源

2015-07-03 11:10:06

您正在以不正確的方式處理問題。

在表單提交您需要檢查每個你想分開的領域。

例如：

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

來源

2015-07-03 11:12:42

嘗試jQuery驗證引擎。它很容易實現你的表單。 Validation Engine

支持所有瀏覽器

來源

2015-07-03 11:16:12

JQuery表單驗證工作不正常需要修復？

回答

相關問題