Question

我使用名为steps的jQuery插件来创建表单向导。哪个可以与jQuery validation插件一起使用。

我需要能够在用户进入下一组选项之前验证选择列表，但我还没有找到办法。

到目前为止我的代码。 HTML

<h2>Engagement</h2>
   <div id = "pane1">
      <div class = "panel panel-default">
        <div class = "panel-heading">
          Engagement
           </div>
             <div class = "panel-body">
               <table class='table table-hover'>
                <tr valign='top'><td class='tableLabel'>Request Type:</td><td><select onchange = "getType();"  id = "type" class="selectpicker required" name='type'>
 <?php
foreach($types AS $key => $val){
    echo "<option value='{$key}'>{$val}</option>"; 
   }
?>
</select></td></tr>  
<tr valign='top'><td class='tableLabel'>Delivery Date:</td><td><input  id='deliveryDate' placeholder="Select a delivery date for your request"  class="form-control datePicker required" type='text' name='devlireyDate'></td></tr>
</table> 
 </div> 
</div>
</div>


            <h2>Details</h2>

            <div id = "pane2">

            </div>
         </form>

jQuery

$(function (){
     $("#engagementForm").steps({
     headerTag: "h2",
     bodyTag: "div",
     transitionEffect: "slideLeft",
     onStepChanging: function (event, currentIndex, newIndex)
    {
    // Always allow going backward even if the current step contains invalid fields!
    if (currentIndex > newIndex)
    {
        return true;
    }



    var form = $(this);

    // Clean up if user went backward before
    if (currentIndex < newIndex)
    {
        // To remove error styles
        $(".body:eq(" + newIndex + ") label.error", form).remove();
        $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
    }

    // Disable validation on fields that are disabled or hidden.
    form.validate().settings.ignore = ":disabled,:hidden";

    // Start validation; Prevent going forward if false
                return form.valid();
            },
            onFinishing: function (event, currentIndex)
            {
                var form = $(this);

                // Disable validation on fields that are disabled.
                // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                form.validate().settings.ignore = ":disabled";

                // Start validation; Prevent form submission if false
                return form.valid();
            },
            onFinished: function (event, currentIndex)
            {
                var form = $(this);

                // Submit form input
                form.submit();
            }
        });

                 $('.selectpicker').selectpicker();
                 $(".datePicker").datepicker({ dateFormat: 'yy-mm-dd' , minDate: "+1d" });
            });

交付日期仅通过puttint'required'作为类进行验证，但这对于选择列表无效。

Answer 1

一种方法是将选择更改的值保存到隐藏输入并验证隐藏输入。未经测试但应该有效。

$(document).ready(function(){
    $('#hidden_input').val('');
    form.validate({
        ignore: [], //make hidden works with jQuery validation and not ignore any hidden field
        rules: {
           hidden_input: required
        },
        messages: { ... }
        showErrors: function (errorMap, errorList) {
            $.each(this.successList, function (index, value) {

                 if (value.id == "hidden_input"){
                     $('#select').tooltip('destroy');               
                 }else{
                     $('#'+value.id+'').tooltip('destroy');
                 }
            }); 

            $.each(errorList, function (index, value) {
                 if (value.id == "hidden_input"){
                     $('#select').attr('title',value.message).tooltip({
                        placement: 'left',
                        trigger: 'manual'
                     }).tooltip('show');                
                 }else{
                     $('#'+value.element.id).attr('title',value.message).tooltip({
                        placement: 'left',
                        trigger: 'manual'
                     }).tooltip('show');                
                 }
        }
    });

    //define your jQuery steps here
    form.steps({ ... });

    //save value to hidden field on change of select 
    $('#select').on('change', function(){
         $("#hidden_input").val($("#select").val());
    });
});

Jquery步骤向导选择列表验证

1 个答案: