jQuery驗證插件：隱藏錯誤消息並顯示重點內容

我正在使用jQuery驗證插件在我的註冊表單上進行客戶端驗證。我想隱藏錯誤消息「請輸入您的名字」，然後在紅色框中顯示必填字段。jQuery驗證插件：隱藏錯誤消息並顯示重點內容

以下是我的代碼：

<script> 
    $("#register-form").validate({ 
     errorPlacement: function(error, element) { 
      return true; 
     } 
     rules: { 
      firstname: "required", 
      lastname: "required" 
     }, 
     messages: { 
      firstname: "Please enter your firstname", 
      lastname: "Please enter your lastname" 
     } 
    }); 
</script>

在這裏，我曾用「errorPlacement」選項中隱藏的錯誤消息，但它確實隱藏了消息，但不注重我需要的領域，也是形式被重新加載。

我想所有必填字段以紅色方框集中而不是錯誤消息

來源

2015-10-20 Liz.

你可以參考這個http://stackoverflow.com/questions/6168926/jquery-validation-how-to-make-fields-red –

它顯示我紅色的文字。我不想顯示錯誤消息，但集中所有輸入字段 –

http://code.runnable.com/UhZDd-HhSAsoAALh/setting-focus-to-an-input-field-using-jquery-for-form –

1 - 要隱藏的錯誤消息errorPlacement回調函數設置爲return false;不return true;

errorPlacement: function(error, element) { 
    return false; 
}, //<---missing comma here

2，缺少逗號errorPlacement:函數導致表單提交併且不驗證輸入

3-驗證插件具有默認類小號error和valid，對其進行修改，如下突出顯示輸入字段爲紅色，只需添加border: 1px solid red屬性error選擇

.error { 
    border: 1px solid red; 
} 
.error:focus { 
    border: 1px solid red; 
} 
.valid { 
    border: 1px solid green; 
}

$("#register-form").validate({ 
 
    errorPlacement: function (error, element) { 
 
     return false; 
 
    }, 
 
    rules: { 
 
     firstname: "required", 
 
     lastname: "required" 
 
    }, 
 
    messages: { 
 
     firstname: "Please enter your firstname", 
 
     lastname: "Please enter your lastname" 
 
    } 
 
});

.error { 
 
    border: 1px solid red !important; 
 
} 
 
.error:focus { 
 
    border: 1px solid red !important; 
 
} 
 
.valid { 
 
    border: 1px solid green !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script> 
 
<form role="form" id="register-form"> 
 
    <div class="form-group"> 
 
     <label for="firstname">FirstName:</label> 
 
     <input type="text" class="form-control" name="firstname" id="firstname"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="lastname">LastName:</label> 
 
     <input type="text" class="form-control" name="lastname" id="lastname"> 
 
    </div> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
</form>

Fiddle

來源

2015-10-20 08:44:40 Shehary

謝謝非常適合完美的代碼。我想要這個。 **有效！謝謝** –

$("#register-form").validate({ 
 
    errorPlacement: function (error, element) { 
 
     return false; 
 
    }, 
 
    rules: { 
 
     firstname: "required", 
 
     lastname: "required" 
 
    }, 
 
    messages: { 
 
     firstname: "Please enter your firstname", 
 
     lastname: "Please enter your lastname" 
 
    } 
 
});

.error { 
 
    border: 1px solid red !important; 
 
} 
 
.error:focus { 
 
    border: 1px solid red !important; 
 
} 
 
.valid { 
 
    border: 1px solid green !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script> 
 
<form role="form" id="register-form"> 
 
    <div class="form-group"> 
 
     <label for="firstname">FirstName:</label> 
 
     <input type="text" class="form-control" name="firstname" id="firstname"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="lastname">LastName:</label> 
 
     <input type="text" class="form-control" name="lastname" id="lastname"> 
 
    </div> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
</form>

來源

2016-01-21 10:37:20 DopeAt

，如果想要紅框和錯誤信息以及...我該怎麼做？ – DopeAt

jQuery驗證插件：隱藏錯誤消息並顯示重點內容

回答

相關問題