jQuery UI对话框,选择验证

时间:2013-06-26 18:02:43

标签: javascript jquery jquery-ui jquery-ui-dialog

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

<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"时更改脚本以不批准或验证选择?也许,如果可能的话,在选择附近留言。

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

这是在第一个textarea上验证的demo

1 个答案:

答案 0 :(得分: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,并返回false给提交。

<强> CSS

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