We Keep Coding

jQuery rules add mask

Good day,
I am support an project that develop by other team.
I saw some jQuery code that I am not really understand what the code is doing, I plan to amend on it but at first I need to know what it want to do first.
Here is the code:
$(function(){
$(':input[name=country]').rules('add', {
required: true,
mask: /^[a-zA-Z0-9 ]+$/
});
});
I am suspecting it is mask method, for example which is:
$(':input[name=country]').mask("0000-0000"); // this is work
But I try to run it but it fail, hitting error:
Cannot read property 'call' of jquery.validate.min.js:16 undefined
Any one know what is the code trying to do?

The .rules() method is part of the jQuery Validate plugin and has absolutely nothing to do with the .mask() method which is part of another plugin. This code is trying to dynamically add form validation rules to an input element with name="country".
$(':input[name=country]').rules('add', {
required: true,
mask: /^[a-zA-Z0-9 ]+$/. // <- there is no such rule called 'mask': REMOVE THIS LINE
});
The error is because jQuery Validate is looking for a rule called mask where there is no "mask" rule in this plugin.
Your only options are:
remove all references to this nonexistent rule, OR
create a custom rule called mask using the .addMethod() method

That code appears to be using the jQuery Validate plugin to create a validation rule that the value is required and must consist of only letters, numbers or spaces.
The validation rule is applied to any input, textarea, select, or button element that has a name property with the value of country. I suspect the problem is that you don't have one of these fields in your document.

Debug jQuery form validation

I have a form that submits to a url using the action attribute <form action='/example/url'>. It uses the jQuery validation plugin.
jQuery("form#page-0").validate({
ignore: ':hidden'
,rules: {"product_id_page-0":{"required":true},"name_f":{"required":true,"regex":["^[^=:<>{}()\"]+$",""]},"name_l":{"required":true,"regex":["^[^=:<>{}()\"]+$",""]},"email":{"required":true,"remote":{"url":"\/premium\/ajax?do=check_uniq_email&_url=L3ByZW1pdW0vbG9naW4\/YW1lbWJlcl9yZWRpcmVjdF91cmw9JTJGcHJlbWl1bSUyRnNpZ251cC5waHA="}},"login":{"required":true,"rangelength":["6","32"],"regex":["^([0-9a-zA-Z_][0-9a-zA-Z_ ]+[0-9a-zA-Z_]|[0-9a-zA-Z_]+)$",""],"remote":{"url":"\/premium\/ajax?do=check_uniq_login"}},"pass":{"required":true,"rangelength":["6","32"]},"_pass":{"required":true}}
,messages: {"product_id_page-0":{"required":"Please choose a membership type"},"name_f":{"required":"Please enter your First Name","regex":"Please enter your First Name"},"name_l":{"required":"Please enter your Last Name","regex":"Please enter your Last Name"},"email":{"required":"Please enter valid Email","remote":"--wrong email--"},"login":{"required":"Please enter valid Username. It must contain at least 6 characters","rangelength":"Please enter valid Username. It must contain at least 6 characters","regex":"Username contains invalid characters - please use digits, letters or spaces","remote":"--wrong login--"},"pass":{"required":"Please enter Password","rangelength":"Password must contain at least 6 letters or digits"},"_pass":{"required":"This field is required"}}
//,debug : true
,errorPlacement: function(error, element) {
error.appendTo( element.parent());
}
,submitHandler: function(form, event){form.submit();}
// custom validate js code start
,errorElement: "span"
// custom validate js code end
});
The problem is that sometimes the form submits to the url before the validator fires. I'm suspicious of submitHandler: function(form, event){form.submit();} because I don't understand what the event parameter is doing. In the documentation for jquery validation there's no mention of a second parameter.
Any suggestions for debugging the form are also welcome. Variables to log or other ways to view what's happening. I did set debug:true but it doesn't seem to spit any errors to the console.

The problem is that sometimes the form submits to the url before the validator fires.
It might be because you've specified a non-existant rule. There is no such rule/method called regex. However, there is one called pattern contained within the additional-methods.js file. This is the root cause of your problems. Once the required rule is satisfied, the plugin attempts to evaluate the regex rule and chokes.
I'm suspicious of submitHandler: function(form, event){form.submit();} because I don't understand what the event parameter is doing. In the documentation for jquery validation there's no mention of a second parameter.
If you don't understand what it's doing and it's not in the docs, then why did you put the event argument into your code?
The documentation is correct, there is no second argument. However, having the additional arguments is merely superfluous and will not break anything.
You employ a very unusual code formatting style that makes it difficult to read and troubleshoot.
,submitHandler: function(form, event){form.submit();}
There is no second argument for this callback, so you can remove event.
Since you only have form.submit() within your submitHandler, it's not doing anything different from the default. In other words, remove the entire submitHandler, and after validation the form will submit to the action attribute as per the default.
NOTES:
ignore: ":hidden" is the default behavior, so you don't need to specify it.
It's not necessary to enclose the rule names within quotes.
DEMO: http://jsfiddle.net/1e82p64f/

How would I use javascript to validate an e-mail with output on the DOM?

Basically I created a form in html and when things are input properly it simply goes to google.com. Right now I have completed the first few fields but I am unsure of how I would make it recognize if the input that was put in and did not include an # sign or a . some point after it.
I created a fiddle as I was having trouble getting some of the longer of my lines of code to be in-line.
Click here for the fiddle Example

You have a few options depending on how thorougly you want to validate.
email.indexOf('#') >= 0
checks that there is an # at all in the email. See http://jsfiddle.net/27f1h6ws/ for a version of your fiddle with it added.
A more thorough way would be to check it with regex. You can do it extremely simple just checking the general structure of the email input, or extremely thorough check for all valid characters, depending on how crucial the validation is. See this link or the answers in this question for more information.

You can use HTML5 properties like :
pattern attribute which contains a regexp
set your input type to email
If you want to do it with JavaScript, use a regexp also and use the test() method to verify it.

Add this
var re = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);

Javascript regex to detect emptiness or specific pattern

I'm using jQuery Validate for my form. I added an additional method to check for valid SSN values.
$.validator.addMethod(
'ssn',
function(e,i,a) {
return e.match(/^(\d{10})$/);
},
'SSN is not valid'
);
It works fine, but the problem is that the field is not required, and if the user does not input any data in the field, it still gets validated and throws an error.
This validation should only take place IF and ONLY IF the user actually inputs some data in that field. How can I cover that in the regex? Thanks!

Please try the following. By adding ? it now expects an optional 10 digits.
$.validator.addMethod(
'ssn',
function(e,i,a) {
return e.match(/^(\d{10})?$/);
},
'SSN is not valid'
);

How can I validate a form field value against a variable with jQuery Validate?

I'm sure there must be a simple solution to this..
I simply want to create a rudimentary human verification tool for an online form. In pseudo-code, something like
$answer = "foo";
if (form['question'] == $foo){
// Proceed
} else {
// Fail
}
The jQuery docs seem to have an equalTo method but this is to compare a form field with another form value..
Any tips greatly appreciated! :)

You need to have a look at JQuery Validation plugin at http://docs.jquery.com/Plugins/validation. Consider the following example:
You may change the rules as explained in the plugin to implement your custom validations.

Have you looked at this plugin? You can use it to make fields required, validate for certain value types (number, string, credit card, etc), and I believe you can write callback functions to validate for specific values.
http://docs.jquery.com/Plugins/validation

var answer = 'foo';
if ($('#question').val() == answer) {
// Proceed
} else {
// Fail.
}