Jquery $ .validator.addMethod未被调用

时间：2017-10-10 09:04:39

标签： php jquery forms validation

我已经提到过这些文件＆amp;堆栈溢出这个问题，我找到了一些解决方案＆amp;即使我试着相应地操纵，但那些dint对我有用。所以最后我在这里发布了这个。

当我点击提交时，直接转到 submitHandler ＆amp;未与定义的自定义方法相关的验证 select_not_default ＆amp;我尝试在这个自定义方法中设置警报，但它没有调用表示自定义方法或jquery包含我正在使用的订单或jquery版本的错误。

请帮我找出我做错的地方。从过去两天这么困惑。

这是我将jquery＆amp; amp;验证插件：

<script type="text/javascript" src="http://192.168.1.8/cruise_booking/application/assets/js/lib/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script>

以下是HTML表单：

<form action="http://192.168.1.8/cruise_booking/booking/availability" method="post" id="availability_form">
<!-- SIDEBAR AVAILBBILITY -->
<div class="reservation-sidebar_availability bg-gray">

    <!-- HEADING -->
    <h2 class="reservation-heading">YOUR RESERVATION</h2>
    <!-- END / HEADING -->
<select class="awe-select" name="source" id="source">
    <option value="0">Source</option>
    <option value="1">Goa</option>
    <option value="3">Mumbai</option>
</select>
<select class="awe-select" name="destination" id="destination">
    <option value="0">Destination</option>
    <option value="2">Goa</option>
    <option value="4">Mumbai</option>
</select>
<select class="awe-select" name="month" id="month">
    <option value="0">Month</option>
    <option value="Oct/2017">Oct/2017</option>
    <option value="Nov/2017">Nov/2017</option>
</select>
<dddc id="date_dd_container">
<select class="awe-select" name="date" id="date">
    <option value="0">Dates</option>
    <option value="1">2017-10-12 09:30:00</option>
</select>
</dddc>
<select class="awe-select" name="adults" id="adults">
    <option value="0">Adults</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select class="awe-select" name="children" id="children">
    <option value="0">Children</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select class="awe-select" name="infants" id="infants">
    <option value="0">Infants</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
    <div class="vailability-submit">
        <input type="submit" name="search_btn" class="awe-btn awe-btn-13" value="Search">
    </div>
</div>
<!-- END / SIDEBAR AVAILBBILITY -->
</form>

以下是验证表单的代码。

$.validator.addMethod("select_not_default", function(value, element) {
            var d = parseInt(value);
            alert(d);
            if(d == 0)
            {
                return false;           
            }
            else
                return true;
            }); 

            $("#availability_form").validate({
            rules: {
                source: {
                    required: true,
                    select_not_default: true
                },
                destination: {
                    required: true,
                    select_not_default: true
                },
                month: {
                    required: true,
                    select_not_default: true
                },
                date: {
                    required: true,
                    select_not_default: true
                }
            },
            messages: {
                source: {
                    required: "This field is required",
                    select_not_default: "Choose any other value than default one."
                },
                destination: {
                    required: "This field is required",
                    select_not_default: "Choose any other value than default one."
                },
                month: {
                    required: "This field is required",
                    select_not_default: "Choose any other value than default one."
                },
                date: {
                    required: "This field is required",
                    select_not_default: "Choose any other value than default one."
                }
            },
            submitHandler: function(form) {
                    alert("hi");
                form.submit();
            }
        });

1 个答案:

答案 0 :(得分：1)

你可以做的是等到document is ready：

$( document ).ready(function() {

});

＆＃13;
＆＃13; 
$( document ).ready(function() {
  $.validator.addMethod("select_not_default", function(value, element) {
      var d = parseInt(value);
      if(d == 0)
      {
          return false;
      }
      else
          return true;
  });

  $("#availability_form").validate({
      rules: {
          source: {
              required: true,
              select_not_default: true
          },
          destination: {
              required: true,
              select_not_default: true
          },
          month: {
              required: true,
              select_not_default: true
          },
          date: {
              required: true,
              select_not_default: true
          }
      },
      messages: {
          source: {
              required: "This field is required",
              select_not_default: "Choose any other value than default one."
          },
          destination: {
              required: "This field is required",
              select_not_default: "Choose any other value than default one."
          },
          month: {
              required: "This field is required",
              select_not_default: "Choose any other value than default one."
          },
          date: {
              required: "This field is required",
              select_not_default: "Choose any other value than default one."
          }
      },
      submitHandler: function(form) {
          console.log("hi");
          form.submit();
      }
  });
  });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script>

<form action="http://192.168.1.8/cruise_booking/booking/availability" method="post" id="availability_form">
<!-- SIDEBAR AVAILBBILITY -->
<div class="reservation-sidebar_availability bg-gray">

    <!-- HEADING -->
    <h2 class="reservation-heading">YOUR RESERVATION</h2>
    <!-- END / HEADING -->
<select class="awe-select" name="source" id="source">
    <option value="0">Source</option>
    <option value="1">Goa</option>
    <option value="3">Mumbai</option>
</select>
<select class="awe-select" name="destination" id="destination">
    <option value="0">Destination</option>
    <option value="2">Goa</option>
    <option value="4">Mumbai</option>
</select>
<select class="awe-select" name="month" id="month">
    <option value="0">Month</option>
    <option value="Oct/2017">Oct/2017</option>
    <option value="Nov/2017">Nov/2017</option>
</select>
<dddc id="date_dd_container">
<select class="awe-select" name="date" id="date">
    <option value="0">Dates</option>
    <option value="1">2017-10-12 09:30:00</option>
</select>
</dddc>
<select class="awe-select" name="adults" id="adults">
    <option value="0">Adults</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select class="awe-select" name="children" id="children">
    <option value="0">Children</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select class="awe-select" name="infants" id="infants">
    <option value="0">Infants</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
    <div class="vailability-submit">
        <input type="submit" name="search_btn" class="awe-btn awe-btn-13" value="Search">
    </div>
</div>
<!-- END / SIDEBAR AVAILBBILITY -->
</form>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题