我已经提到了这个问题的文件和堆栈溢出,我找到了一些解决方案甚至我尝试相应地操作,但这些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
发布评论