We Keep Coding

minlength input field validation - JQuery

I have the JQuery validations below that just ensure that something is written within the input fields, I also have maxlength in the html.
However, I was hoping someone could shed some light on the situation and inform me on how I can add some type of minlength to the jquery code below so I don't require to do any additional functions?
$('#form1').submit(function (e) {
e.preventDefault();
}).validate({
rules: {
txtusername: {
required: true
},
txtfirstname: {
required: true
},
txtemail: {
required: true
},
txtpassword: {
required: true
},
passwordconfirm: {
required: true
}
},
messages: {
txtusername: {
required: "Please enter your Username."
},
txtfirstname: {
required: "Please enter your First Name."
},
txtemail: {
required: "Please enter your Email."
},
txtpassword: {
required: "Please enter your Password."
},
passwordconfirm: {
required: "Please enter your password again."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form, user) {
CheckUser(form);
return false;
}
});
Example HTML -
<div data-role="fieldcontainer">
<label for="txtusername" data-theme="d">Username:</label>
<input type="text" id="txtusername" name="txtusername" maxlength="12" placeholder="Enter Username"/>
</div>

You can use like below:
rules:{
txtusername: {
required: true,
minlength: 3
},
}

jquery validate when field not empty

I validate my form using jquery validate like this:
$("#formuser").validate({
rules: {
accountname: {
required: true,
minlength: 6
},
T1: {
required: true,
minlength: 6
},
accountpassword1: {
required: true,
minlength: 8
},
accountpassword2: {
required: true,
minlength: 8,
equalTo: "#accountpassword1"
},
},
});
HTML:
<input id="accountpassword1" class="text-input form-control" type="text" name="accountpassword1" size="24" placeholder="password" >
<input class="text-input form-control" type="text" name="accountpassword2" size="24" placeholder="password" >
this worked for me But. I need to check jquery validate when password1 and password 2 not empty. my mean is if password input is empty jquery validate not validate field else validate field password1 and password2.
how do create this?
NOTE:: i need to only check validate accountpassword1 and accountpassword1 with this method.

You can use the depends option like
function isPasswordPresent() {
return $('#accountpassword1').val().length > 0;
}
$("#formuser").validate({
rules: {
accountname: {
required: true,
minlength: 6
},
T1: {
required: true,
minlength: 6
},
accountpassword1: {
//required: true is not required
minlength: {
depends: isPasswordPresent,
param: 8
}
},
accountpassword2: {
required: isPasswordPresent,
minlength: {
depends: isPasswordPresent,
param: 8
},
equalTo: {
depends: isPasswordPresent,
param: "#accountpassword1"
}
},
},
});
Demo: Fiddle

I had the same requirement So I used this code
$.validator.addMethod(
"regex",
function(value, element, regexp){
return this.optional(element) || regexp.test(value);
},
"Please check your input.");
$('#registration').validate({
rules: {
first_name: {
required: true , regex: /([-a-zA-Z0-9]|\0)/
},
last_name: {
required: true , regex: /([-a-zA-Z0-9]|\0)/
}
},
errorPlacement: function(){
return false;
},
submitHandler: function (form){
alert('sucess')
return false;
}
});
its working for me. Hope it helps

How to active a function only if dedicated button is clicked

I'm at coding a multi step form and have a question:
Is it possible in JavaScript or jQuery to activate this validation script:
<script type="text/javascript">
$(function (){
// Validation
$("#sky-form").validate({
// Rules for form validation
rules: {
country: { required: true },
industry: { required: true },
logoname: { required: true },
sloganch: { required: true }
},
// Messages for form validation
messages: {
country: { required: 'Please enter your name' },
industry: { required: 'Please check one of the options' },
logoname: { required: 'Please enter your Logo name' },
sloganch: { required: 'Please check one of the options' }
},
// Do not change code below
errorPlacement: function(error, element){
error.insertAfter(element.parent());
}
});
});
</script>
Only when this button is clicked :
<button type="button1" class="button next action-button" id="button4">Next</button>
It would be nice if the id="button 4" determine this function.

You can try this
$('#button4').click(function() {
$("#sky-form").validate({
// Rules for form validation
rules: {
country: { required: true },
industry: { required: true },
logoname: { required: true },
sloganch: { required: true }
},
// Messages for form validation
messages: {
country: { required: 'Please enter your name', },
industry: { required: 'Please check one of the options', },
logoname: { required: 'Please enter your Logo name' },
sloganch: { required: 'Please check one of the options' }
},
// Do not change code below
errorPlacement: function(error, element){
error.insertAfter(element.parent());
}
});
});
.validate() - to initialize the plugin (with options) once on DOM ready.
.valid() - to check validation state (boolean value) or to trigger a validation test on the form at any time.

The answer is :
$('#button4').click(function()
{
// Validation
$("#sky-form").validate({
// Rules for form validation
rules: {
country: { required: true },
industry: { required: true },
logoname: { required: true },
sloganch: { required: true }
},
// Messages for form validation
messages: {
country: { required: 'Please enter your name' },
industry: { required: 'Please check one of the options' },
logoname: { required: 'Please enter your Logo name' },
sloganch: { required: 'Please check one of the options' }
},
// Do not change code below
errorPlacement: function(error, element){
error.insertAfter(element.parent());
}
});
});
If button code
<button type="button1" class="button next action-button" id="button4">Next</button>
Special thanks go to Satpal who answered my question .

JQuery validation plugin maxlength?

I am using JQuery validation plugin. I want to specify maxlength for one of the fields.It can be specified as below.
rules: {
Message: {
required: false,
maxLength: 200
}
}
But instead of defining the rules externally, i want to specify the rules inside html input code
Similar to :
<input type="text" name="AssistanPhone" value="" class="required" />
In above example "required" is specified through class. Similarly how can i specifiy maxlength which can be recognized by jquery plugin and gives error message if length exceeds?
Thanks!

Not capital L its l
Ex:
$( "#myform" ).validate({
rules: {
field: {
required: true,
maxlength: 200
}
}
});
PLUGIN DEMO

As far as I can see you cannot specify the messages via attributes, but the maxlength can be specified as a attribute
<input type="text" name="AssistanPhone" value="" required maxlength="3" />
Demo: Fiddle

I updated the javascript code of the validator myself (so I'm stuck with my version 1.8.1 now instead of upgrading), but here's what I did (around line 767):
classRules: function(element) {
var rules = {};
var classes = $(element).attr('class');
classes && $.each(classes.split(' '), function() {
if (this in $.validator.classRuleSettings) {
$.extend(rules, $.validator.classRuleSettings[this]);
}
if (this.toLowerCase().lastIndexOf('maxlength-', 0) === 0) { // starts with
var x = parseInt(this.substring(10)); // take number after 'maxlength-'
$.extend(rules, {maxlength: x});
}
});
return rules;
},
I added the extra if-test for "maxlength-", so now I can add a class like "maxlength-10" to limit to 10. Of course I could also add minlength and so on.

$("#FormID").validate({
rules: {
PriorityDDL: {
required: true
},
Title: {
required: true
},
Text: {
required: true,
maxlength: 300
},
date: {
required: true
},
reportfile: {
required: true
}
},
messages: {
PriorityDDL: {
required: "Please select priority"
},
Title: {
required: "Please enter title"
},
Text: {
required: "Please enter message",
maxlength:"maxLength is 300 characters"
},
date: {
required: "Please select date"
},
reportfile: {
required: "Please select file"
}
}
});

JQuery validation plugin gives error?

I am using JQuery validation plugin.
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
Jquery code:
function validateForm(){
$('[name^="attribute"]').each(function(){
$(this).rules("add", {
required: true,
messages: {
required: "Mandatory field"
}
} );
});
$('[name^="valueAttribute"]').each(function(){
$(this).rules("add", {
required: true,
maxlength: 12,
email: true,
messages: {
required: "Enter email",
email: "Enter valid email",
maxlength: "Maximum 12 characters"
}
} );
});
return $("#myForm").validate({
onfocusout: function(element) { jQuery(element).valid(); }
});
}
But above script gives error as below.
TypeError: $.data(...) is undefined
am i doing anything wrong here? It works fine if i remove all for each and go with default messages.
Thanks!

you are not using $(document).ready();
try this
$(document).ready(function(){
// do script here
});
hope it will help

The only problem seems to be, you are adding the rules to the elements before the validator plugin is initialized for the form
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js"></script>
then
jQuery(function ($) {
function validateForm(){
var validator = $("#myForm").validate({
onfocusout: function(element) { jQuery(element).valid(); }
});
$('[name^="attribute"]').each(function(){
$(this).rules("add", {
required: true,
messages: {
required: "Mandatory field"
}
} );
});
$('[name^="valueAttribute"]').each(function(){
$(this).rules("add", {
required: true,
maxlength: 12,
email: true,
messages: {
required: "Enter email",
email: "Enter valid email",
maxlength: "Maximum 12 characters"
}
} );
});
return validator;
}
});
Demo: Fiddle