首页 > 编程入门 文章详情

Jquery $ .validator.addMethod未被调用(Jquery $.validator.addMethod not getting called)

编程入门 行业动态 更新时间:2024-10-26 21:32:39
Jquery $ .validator.addMethod未被调用(Jquery $.validator.addMethod not getting called)

我已经提到了这个问题的文件和堆栈溢出，我找到了一些解决方案甚至我尝试相应地操作，但这些dint对我有用。 所以最后我在这里发布了这个。

当我点击提交它直接进入submitHandler并且没有相应于定义的自定义方法验证select_not_default ＆我尝试在这个自定义方法中放置警报但是它不会调用那意味着自定义方法或jquery包括顺序或jquery版本i有问题我正在使用 。

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

这是我包含jquery和验证插件的顺序：

<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(); } });

I have referred the documents & stack overflow for this problem where i found some solutions & even i tried manipulating accordingly but those dint work for me. So finally i have posted this here.

When i click submit its directly going to submitHandler & not validating with respective to the defined custom method select_not_default & i tried putting alert in this custom method but it doesn't call that means something wrong with custom method or jquery including order or jquery version i am using.

Please help me to find where i am doing wrong. so confused from past two days.

This is the order i have included the jquery & validation plugins:

<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>

Below is the HTML form:

<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>

Below is the code to validate the 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(); } });

最满意答案

您可以做的是等到文档准备就绪 ：

$( document ).ready(function() { }); 

$( 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();
      }
  });
  }); 
  
<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> 
  
 

What you could do is wait until the document is ready with:
 
$( document ).ready(function() {

});
 

 
 
  
  
$( 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();
      }
  });
  }); 
  
<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>

更多推荐

value,jquery,class,电脑培训,计算机培训,IT培训"/> <meta name="descriptio

本文发布于:2023-08-04 17:14:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1420718.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：未被   validator   Jquery   called   addMethod

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表