web-dev-qa-db-ja.com

フィールドが空の場合、jquery検証ドロップダウンが必要

#categoryフィールドが空の場合、ドロップダウンを必須にしようとしています。

ありがとう！

JQUERY ATTEMPT＃1：

$("#uploadDocsForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 255  
        },
        cat_id: {
            required: function(element) {
                return $("#category").val() == '';
            }
        }
    },
    messages: {
        name: 'Please enter a <b>Document Name</b>.',
        cat_id: 'Please select a <b>Category</b>.'
    }
});

JQUERY ATTEMPT＃2：

$("#uploadDocsForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 255  
        },
        cat_id: {
            required: {
                depends: function(element) {
                    return $("#category").val() == '';
                }
            }
        }
    },
    messages: {
        name: 'Please enter a <b>Document Name</b>.',
        cat_id: 'Please select a <b>Category</b>.'
    }
});

HTML：

<form name="uploadDocsForm" id="uploadDocsForm">   
    <label for="name">Document Name</label>
    <input name="name" id="name" type="text" class="textbox"/>
    <label for="cat_id">Category</label>
    <select name="cat_id" id="cat_id" class="dropdown">
    <option selected>Please Select Category</option>
    <option>------------------------</option>
    <option value="1">test cat</option>
    </select>
    <label for="category">New Category</label>
    <input name="category" id="category" type="text" class="textbox"/>
    </form>
jqueryjquery-validate
14
Stephen S.
$("#uploadDocsForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 255  
        },
        cat_id: {
            required: {
                depends: function(element) {
                    return $("#category").val() == '';
                }
            }
        }
    },
    messages: {
        name: 'Please enter a <b>Document Name</b>.',
        cat_id: 'Please select a <b>Category</b>.'
    }
});

Depends関数は、category要素が入力されているかどうかをチェックし、入力されている場合は2番目が必要です。それ以外の場合はオプションです（つまり、埋めることができます）。

ユースケース：

  • カテゴリが入力され、cat_idが空：無効
  • カテゴリが満たされ、cat_idが満たされた：有効
  • カテゴリが空、cat_idが空：有効
  • カテゴリが空で、cat_idが入力されている：有効
20
Chad

「依存」はサポートされなくなったようです。

私は以下を使用しましたが、うまくいきます：

<form name="uploadDocsForm" id="uploadDocsForm">   
    <label for="name">Document Name</label>
    <input name="name" id="name" type="text" class="textbox"/>
    <label for="cat_id">Category</label>
    <select name="cat_id" id="cat_id" class="dropdown">
    <option value="" selected>Please Select Category</option>
    <option>------------------------</option>
    <option value="1">test cat</option>
    </select>
    <label for="category">New Category</label>
    <input name="category" id="category" type="text" class="textbox"/>
    </form>

Valが空であるため検証が失敗するoption value = ""に注意してください

$("#uploadDocsForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 255  
        },
        cat_id: {
            required: true
            }
        }
    },
    messages: {
        name: 'Please enter a <b>Document Name</b>.',
        cat_id: 'Please select a <b>Category</b>.'
    }
});
3
Ravi Ram