jQuery驗證插件錯誤CSS

我希望在出錯時將標籤字體顏色更改爲紅色，或者將文本框元素的顏色設爲紅色。我使用的CSS不適用於我，不知道如何更改收音機/文本框的標籤，而不是如果由validate插件添加的標籤錯誤。jQuery驗證插件錯誤CSS

// HTML

<form id="form1" name="form1" class="form1" method="post" >  
    <label for="gender"> 
     Gender       
    </label> 

    <input type="radio" name="gender" value="female" id="gender_0" /> 
     Female 
    </input> 
    <br /> 

    <input type="radio" name="gender" value="male" id="gender_1" /> 
     Male 
    </input> 
     <br /> 

     <label for="name">Name</label>      
     <input type="text" name="name" id="name" /> 
    <br /><br /> 

    <input type="submit" name="Submit" value="Submit" /> 
</form>

// JS

$().ready(function() { 

    $("#form1").validate({ 
     rules: { 
      gender: "required", 
         name: "required" 
     }, 
     messages: { 
      gender: "Please select an option", 
         name: "Please enter your name" 
     } 
    }); 
});

// CSS

#form1 label.error { 
    margin-left: 10px; 
    width: auto; 
    display: inline; 
}

來源

2010-10-08 Phill Pafford

你可以包裝每個label - input組合在div，然後使用內置-in highlight功能：

HTML

<form id="form1" name="form1" class="form1" method="post" > 
    <div>  
     <label for="gender">Gender</label> 
     <br /><input type="radio" name="gender" value="female" id="gender_0" />Female 
     <br /><input type="radio" name="gender" value="male" id="gender_1" />Male 
    </div> 
    <div> 
     <label for="name">Name</label>      
     <input type="text" name="name" id="name" /> 
    </div> 

    <br /><br /> 
    <input type="submit" name="Submit" value="Submit" /> 
</form>

jQuery的

$("#form1").validate({ 
    rules: { 
     gender: "required", 
     name: "required" 
    }, 
    messages: { 
     gender: " - Please select gender", 
     name: " - Please enter your name" 
    }, 
    errorElement: "span", 
    errorPlacement: function(error, element) { 
     element.siblings("label").append(error); 
    }, 
    highlight: function(element) { 
     $(element).siblings("label").addClass("error"); 
    }, 
    unhighlight: function(element) { 
     $(element).siblings("label").removeClass("error"); 
    } 
});

CSS - 錯誤/高光類

.error { 
    color: red; 
}

JSFiddle Demo here。

希望這會有所幫助！

來源

2010-10-08 15:20:38

嗯不工作，在螢火說 'element.siblings（「標籤」）addClass（「錯誤」）;'。不是功能 – 2010-10-08 16:10:37

Ooopsie，我的壞。我更新了jQuery腳本中的高亮/不高亮部分。 – 2010-10-08 16:17:49

這只是亂糟糟的元素，什麼也沒有顯示 – 2010-10-08 17:36:09

我真的以下列方式工作

HTML

<div class="control-group"> 
    <label for="name" class="control-label"> 
      Name:<em>*</em></label> 
    <div class="controls"> 
      <input type="text" id="name"></div> 
</div>

jQuery的

$("#form1").validate({ 
rules: { 
    gender: "required", 
    name: "required" 
}, 
messages: { 
    gender: " - Please select gender", 
    name: " - Please enter your name" 
}, 
errorElement: "span", 
errorPlacement: function(error, element) { 
    element.siblings("label").append(error); 
}, 
highlight: function(element) { 
      $(element).closest('.control-group').removeClass('success').addClass('error'); 
     }, 
     success: function(element) { 
      element 
      .text('OK!').addClass('valid') 
      .closest('.control-group').removeClass('error').addClass('success'); 
     }

}）;

CSS

.control-group.error input, .control-group.error select, .control-group.error textarea { border-color: #b94a48;} 
.control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline { color: #b94a48; } 
.control-group.success input, .control-group.success select, .control-group.success textarea { border-color: #468847; } 
.control-group.success .control-label, .control-group.success .help-block, .control-group.success .help-inline { color: #468847; }

來源

2013-09-17 17:30:59 Rick

jQuery驗證插件錯誤CSS

回答

相關問題