我正在验证使用Jquery Validation Plugin(最新版本1.11)。 我的表单和字段设置如下,
的表格 的 食谱标题: *
<div class="row control-group">
<label for="recipecats" class="col col-lg-2 control-label">Recipe Category:<sup>*</sup></label>
<div class="col col-lg-3 controls">
<select class="input-with-feedback recicat" id="recipecats" name="recipecats" title="Please select a category">
<option value=""><?php echo esc_attr(__('Select Category')); ?></option>
<?php $categories= get_categories('child_of=47'); foreach ($categories as $category) { ?>
<option value="<?php echo $category->slug;?>"><?php echo $category->cat_name;?></option>
<?php } ?>
</select>
</div>
<label for="recipecatssug" class="col col-lg-2 control-label">Suggested:<sup> </sup></label>
<div class="col col-lg-2 controls">
<input id="recipecatssug" class="input-with-feedback recicat" data-content="Optional: You may suggest a category if its not listed." data-placement="top" data-toggle="popover" title="Suggested Category" name="recipecatssug" placeholder="Suggest Cat" type="text">
</div>
</div> <!-- recipe cats -->
<div class="row">
<div class="col col-lg-10 col-offset-2">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div> <!-- recipe-form -->
的验证 的
<script>
$(document).ready(function(){
$('#recipe-submit-form').validate({
rules: {
recipetitle: {
minlength: 10,
required: true
},
groups: {
name: "recipecats recipecatssug"
},
recipecats: {
require_from_group: [1, ".recicat"]
},
recipecatssug: {
require_from_group: [1, ".recicat"]
}
},
messages: {
recipetitle: {
required: "Pleae enter a valid recipe title",
minlength: "Recipe title must be at least 8 characters long"
},
recipecats: {
require_from_group: "Pleae select at-least one category or suggest a custom"
}
},
});
}); // end document.ready
</script>
问题在于,当表单经过验证时,它仅验证最后的字段(类别和建议的猫)其他字段错误未显示,焦点不会转移到第一个输入字段。 我们将不胜感激。