Question

I'm having a weird problem. Trying to use jQuery Validation to validate a dropdown/select list on my form, but it just won't validate. Not sure why, I've double checked if there is any typo or any syntax error but none. Below is a copy of my code.

Thanks a million!

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script>
    $(function () {
        //datepicker script
        $( "#datepicker" ).datepicker({
            altField: $('#dateHdn'),
            dateFormat: "MM-dd-yy"
        }); //end of datepicker script

        //configure validation here
        $("#addform").validate({
            rules: {
                invacc: { required:true },
                lvlstat: { required: true }

            },
            messages: {
                invacc: "please insert a value",
                lvlstat: "Please choose a status" 
            }
        })// end of validate script

        //dropdown script
        $("#lvlstat").selectmenu({
        });//end of dropdown script});

       </script>
       </head>

<body>
<form id="addform" method="post" enctype="multipart/form-data" action="">
    <fieldset>
        <legend>Add Required Values</legend>
        <p>
            <label for="invacc">Inventory Accuracy: </label>
            <input type="text" name="invacc" />
        </p>
        <p>
            <label for="lti">LTI: </label>
            <input type="text" name="lti" />
        </p>
        <p>
            <label for="overtime">Overtime: </label>
            <input type="text" name="overtime" />
        </p>
        <p>
            <label for="datetime">Date: </label>
            <input type="text" name="dtval" id="datepicker" />
        </p>
        <p>
            <label for="lvlstat">Status: </label>
            <select id="lvlstat" name="lvlstat">
                <option value="">Choose an Option</option>
                <option value="1">Certified</option>
                <option value="2">Learner</option>
                <option value="3">Rookie</option>
            </select>
        </p>
        <p><label for="FileUpload">Image Upload: </label>
        @FileUpload.GetHtml(
        initialNumberOfFiles: 1,
        allowMoreFilesToBeAdded: false,
        includeFormTag: false,
        uploadText: "Upload")
        </p>
        <p><input type="submit" name="buttonSubmit" value="Add" /></p>
        <p><a href="~/main">Return to main page</a></p>

    </fieldset>
</form>
</body>

Answer 1

添加此

$("input[name='buttonSubmit']").click(
    function(){
                    if($('#lvlstat').val() == ''){
                alert('dropdown validationg failed');
              return false;
          }
    });

Fiddle

Answer 2

我建议您查看脚本的包含，因为它似乎如此您已将验证jquery脚本包括两次（原始版本和缩小版本）：

<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>

此外，您可以查看浏览器控制台并使用浏览器提供的开发人员工具来验证脚本是否已正确检索并识别可能的错误。

jQuery Validation dropdown list

2 个答案: