JQuery validation, subtitle not working

I am trying to perform some additional checks and formatting on some fields of my form before they are submitted. So I used the jQuery validation plugin. It works well, as it displays all manufactory error messages properly, however, as soon as I set the necessary values, the form just submits. At this point, I'm not even sure that even submitHandler . Any ideas?

Html form: http://jsfiddle.net/7PAZU/

 $(function() { $("#commentForm").validate({ rules: { bill_first_name: { required: true }, bill_last_name: { required: true }, email: { required: true, email: true }, Phone: { required: true, number: true }, bill_address_one: { required: true }, bill_city: { required: true }, bill_state_or_province: { required: true }, charge_total: { required: true, float: true }, }, messages: { bill_first_name: { required: "Please put in First Name" }, bill_last_name: { required: "Please put in last Name" }, email: { required: "Please enter a valid email" }, phone: { required: "Please enter a valid Phone Number" }, bill_address_one: { required: "Please put in Address" }, bill_city: { required: "Please put in City" }, bill_state_or_province: { required: "Please put in state" }, charge_total: { required: "Please put Amount In Whole number such as 10.00", number: "Please put in Amount In Whole number such as 10.00" }, }, submitHandler: function(frm) { $("#charge_total").val(parseFloat($("#charge_total").val()).toFixed(2)); alert("Dukhche Na"); return false; } }); })​ 
+6
source share
2 answers

Your code does not work because you are using a validation rule that does not exist.

 charge_total: { required: true, float: true // there no validator named `float` } // Comma removed here 

But there is no validator named float in this plugin. Remove this and it will work fine. You can create your own float validator if you want.

Working script

Check the list of available rules here http://docs.jquery.com/Plugins/Validation#Validator

How did I find this?

I checked the console and found that this error was selected

 Uncaught TypeError: Cannot call method 'call' of undefined 

From the next line inside the plugin source file

 var result = $.validator.methods[method] .call( this, element.value.replace(/\r/g, ""), element, rule.parameters ); 

The value of $.validator.methods[method] is undefined, which proves that you are using a validator that does not exist.

So, I checked the available list of validation methods and your rules and found that you are using a float rule that is not available.

So, JS throws this error and stops execution, so your submit handler not called and the form is not submitted (which is the default behavior if you do not prevent the use of JS ).

+8
source

IE is especially picky with extra commas ... remove them to run:

 $(function() { $("#commentForm").validate({ rules: { bill_first_name: { required: true }, bill_last_name: { required: true }, email: { required: true, email: true }, Phone: { required: true, number: true }, bill_address_one: { required: true }, bill_city: { required: true }, bill_state_or_province: { required: true }, charge_total: { required: true, float: true } // Comma removed here }, messages: { bill_first_name: { required: "Please put in First Name" }, bill_last_name: { required: "Please put in last Name" }, email: { required: "Please enter a valid email" }, phone: { required: "Please enter a valid Phone Number" }, bill_address_one: { required: "Please put in Address" }, bill_city: { required: "Please put in City" }, bill_state_or_province: { required: "Please put in state" }, charge_total: { required: "Please put Amount In Whole number such as 10.00", number: "Please put in Amount In Whole number such as 10.00" } // Comma removed here }, submitHandler: function(frm) { $("#charge_total").val(parseFloat($("#charge_total").val()).toFixed(2)); alert("Dukhche Na"); return false; } }); })​ 
+2
source

Source: https://habr.com/ru/post/918731/


All Articles