javascript - 带有选择验证功能的 jQuery UI 对话框

Question

我想验证一个选择。这是选择:

<select id="ccategory" name="category" class="input">
  <option value="0" selected="selected">[Choose Category]</option>
  <option value="Arts and entertainment">Arts and entertainment</option>
  <option value="Automotive">Automotive</option>
  <option value="Business">Business</option>
  <option value="Computers">Computers</option>
  <option value="Games">Games</option>
  <option value="Health">Health</option>
  <option value="Internet">Internet</option>
  <option value="News and Media">News and Media</option>
  <option value="Recreation">Recreation</option>
  <option value="Reference">Reference</option>
  <option value="Shopping">Shopping</option>
  <option value="Sports">Sports</option>
  <option value="World">World</option>
</select>

这是验证选择的脚本:

$(document).ready(function () {
  $('#dialog').validate({
    rules: {
      category: { required: true },
    },
    submitHandler: function (form) { // for demo
      alert('valid form'); // for demo
      return false; // for demo
    }
  });
});

这是DEMO

当我在 selected 中具有选择值时，此函数也会批准提交的表单

<option value="0" selected="selected">[Choose Category]</option>

如何更改脚本以在 value="0" 时不批准或验证选择？如果可能的话，也许在选择附近有一条消息。

消息:“此字段是必填字段。”

这是demo在第一个文本区域上进行验证。

Answer 1

检查here

JS/jQuery

$('#dialog').validate({
    rules: {
        category:
        {
            required: true
        },
    },
    submitHandler: function (form) { // for demo
        if ($('#ccategory').val() == 0){
            document.getElementById('choose_own_text').innerHTML  = "Please change here";
            return false;}
     //   console.log($('#ccategory').val());
        alert('valid form'); // for demo
        return false; // for demo
    }
});

我添加了if ($('#ccategory').val() == 0){return false;}，这样他检查select的值是否为0，然后返回提交错误。

CSS

#choose_own_text {
    display:inline;
    color:red;
}