I am using jQuery validate plugin, suppose I have 3 input box and they are required fields.
<input type="text" name="firstname" class="required" />
<input type="text" name="lastname" class="required" />
<input type="text" name="email" class="required" />
I want to have different error message, so I configure as below:
$("#myForm").validate({
messages: {
firstname: {
required: 'Please enter firs tname'
},
lastname: {
required: 'Please enter last name'
},
email: {
required: 'Please enter email'
}
},
submitHandler: function(form) {
form.submit();
}
});
However, now I want to have different multilingual error message on each required input box, so I tried to configure as below, the result is not work.
$("#myForm").validate({
messages: {
firstname: {
required: window.lang.currentLang == 'en' ? 'Please enter email' : '請輸入電子郵件地址'
}
},
submitHandler: function(form) {
form.submit();
}
});
Could someone advise the way to configure the plugin to have different multilingual error message.
Thanks
Related
I'm current working on jquery and have a problem about the validation usage. I made a code for register but when i run it, nothing happened and there's no error show up, either. can anyone help me with that?
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" ></script>
<script type="text/javascript" scr="js/signup-form.js"></script>
<script>
$().ready(function () {
$("#registerForm").validate({
rules: {
email: {
required: true,
email: true
},
userName: {
required: true,
minLength: 8
},
password: {
required: true,
minlength: 8
},
passwordConfirmation: {
required: true,
equalTo: "#password"
}
},
messages: {
email: {
required: "This field can not be empty",
email: "Email address does not valid"
},
userName: {
required: "This field can not be empty",
minLength: "UserName must contain at least 8 charactors"
},
password: {
required: "This field can not be empty",
minLength: "Password must contain at least 8 charactors"
},
passwordConfirmation: {
required: "This field can not be empty",
equalTo: "Please enter the same password above"
}
}
});
});
</script>
<form id="registerForm">
<fieldset>
<div>
<p>
<label>Email</label>
<input type="email" value="#Model.Email" name="email" id="email" />
</p>
<p>
<label>Username</label>
<input tyep="text" value="#Model.UserName" name="username"/>
</p>
<p>
<label>Password</label>
<input type="password" value="#Model.Password" name="password"/>
</p>
<p>
<label>Confirm Password</label>
<input type="password" value="#Model.PasswordConfirmation" name="passwordConfirmation" />
</p>
</div>
</fieldset>
<p>
<input type="submit" vaule="Register" />
</p>
</form>
when i hit the register button, nothing happened and there's no error. can anyone help me out with that?
by the way, i using visual studio MVC 5, does that make any problem?
thanks!!!
#edit:
i have tried my code at hjsfiddle.net/5d1b50k6 and it works fine. but it still not working in my computer. does mvc would affect that??
On line 6, add # to select the ID:
$("#registerForm").validate({
http://api.jquery.com/id-selector/
I have a text field(email) in my form which checks whether the entered value is valid, if so then it will have to validate the same again my DB.
The problem is that when I type wrong its not displaying the error message that I have configured under message, instead it chooses over the default msg.
$("#myform").validate({
rules: {
email:{
required: true,
email: true,
type: "post",
remote:{
url:"myservlet?verifyEmail=checkEmail",
/* data: "verifyEmail=checkEmail", */
type: "post",
}
},
messages:{
email:{
required: "Enter a valid email",
remote: "This user is already taken"
}
}
},
highlight: function(element){
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element){
element
.closest('.control-group').removeClass('error')/* .addclass('error') */;
}
});
if(('#myform').validated())
('#myform').submit();
I tried to check the network traffic i dnt see any traffic due to this request. The bootstrap class configured under highlight and success is working fine. This is my first time using this plugin.
Update 1: Input controls
<div class="control-group">
<label class="control-label" for="email"> email:</label>
<div class="controls">
<input type="text" id="email" class="input-xlarge span2" name="email"/>
</div>
</div>
<tr>
<td></td>
<td><input type="button" Value="Refresh" /></td>
</tr>
Update 2:
I have modified my code. Now validation rules is working, but I am still facing issues with ajax request not being fired. Any heads up on that?
Try this - I've update the object structure slightly, messages is a sibling of rules, not a child:
$("#myForm").validate({
rules: {
email: {
required: true,
email: true,
type: "post",
remote: {
url: "myservlet?verifyEmail=checkEmail",
/* data: "verifyEmail=checkEmail", */
type: "post",
}
}
},
messages: {
email: {
required: "Enter a valid email",
remote: "This user is already taken"
}
}
});
DEMO
I'm having trouble getting this to work. It validates the fields as expected, but no matter what I try, I can't properly hook the submit.
Here's my form:
<form action="" id="m-frm-contact_us" class="m-contact_submit" method="post" data-ajax="false">
<input type="text" name="firstName" placeholder="FIRST NAME" title="" id="first" class="contact full required" minlength="2" maxlength="36" />
<input type="text" name="lastName" placeholder="LAST NAME" id="last" class="contact full required" minlength="2" maxlength="36" />
<input type="email" name="mail" placeholder="E-MAIL ADDRESS" id="mail" class="contact full required email" />
<button type="submit" name="submit_contact" value="clicked">Submit</button>
</form>
My JS:
$(document).ready(function(){
$.validator.addMethod(
'placeholder', function(value, element) {
return value != $(element).attr("placeholder");
}, 'This field is required.'
);
$("#m-frm-contact_us").validate({
rules: {
firstName: {
required: true,
minlength: 5,
placeholder: true
},
lastName: {
required: true,
minLength: 5,
placeholder: true
},
mail: {
required: true,
email: true,
placeholder: true
}
},
messages: {
firstName: "First name is required.",
lastName: "Last name is required.",
email: "Valid email address is required."
},
submitHandler: function(form) {
console.log('submitHandler fired.');
contact.submit();
return false;
}
});
$('#m-frm-contact_us').submit(function(e){
console.log('Submit event fired.');
e.preventDefault();
return false;
});
var contact = {
submit : function(){
console.log('Form is being submitted.');
}
};
});
The only thing I get in my console is 'Submit event fired.', called on form submit. Despite my efforts, the form always tries to post to itself, reloading the page.
I want to execute this code on submit:
var contact = {
submit : function(){
console.log('Form is being submitted.');
var _this = this,
post = $.post("/path/to/submit.php", $("#m-frm-contact_us").serialize(), function(response){
try{
if(response==1) {
_this.passed();
} else {
_this.error();
}
}
catch(e){
if(typeof e == 'string') console.log(e);
_this.error();
}
});
},
error : function(){ $.mobile.changePage("#error"); },
passed : function(){ $.mobile.changePage("#passed"); }
}
What am I missing?
I rebuilt the JS, and was able to get this working. Here's the code, in case anyone experiences a similar issue:
Form:
<form action="" method="post" id="m-frm-contact_us" novalidate="novalidate">
<input type="text" name="firstName" placeholder="FIRST NAME" title="" id="first" class="contact full required placeholder noSpecial" minlength="2" maxlength="36">
<input type="text" name="lastName" placeholder="LAST NAME" id="last" class="contact full required placeholder" minlength="2" maxlength="36">
<input type="email" name="mail" placeholder="E-MAIL ADDRESS" id="mail" class="contact full required email">
<button type="submit" name="submit_contact" value="clicked">Submit</button>
</form>
JS:
$.validator.addMethod('noPlaceholder', function(value, element) {
return value !== element.defaultValue;
}, 'This field is required.');
$.validator.addMethod(
'placeholder', function(value, element) {
return value != $(element).attr("placeholder");
}, 'This field is required.'
);
$.validator.addMethod("regex", function(value, element, regexp) {
var check = false;
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
}, "No special Characters allowed here. Use only upper and lowercase letters (A through Z; a through z)");
$('#m-frm-contact_us').submit(function(event) {
event.preventDefault();
if($(this).validate({
rules : {
first_name : {
required : true,
maxlength : 36,
regex : /^[A-Za-z\s`'"\\-]+$/
},
last_name : {
required : true,
maxlength : 36,
regex : /^[A-Za-z\s`'"\\-]+$/
}
}
}).form()) {
var $form = $(this), formData = {
firstName : $form.find('#first').val(),
lastName : $form.find('#last').val(),
mail : $form.find('#mail').val()
};
$.post('/path/to/submit.php', formData, function(response) {
if(response == 1) {
$.mobile.changePage("#passed");
} else {
$.mobile.changePage("#error");
}
})
};
return false;
})
I can't get why the same code isn't working. I'm using devise gem, so all input names are the same.
My password confirmation didn't work in other project.
Here is js code:
$('.sign_up').validate({
rules: {
'user[password]': {
required: true,
minlength: 6
},
'user[password_confirmation]': {
required: true,
minlength: 6,
equalTo: "#user_password"
}
}
My html code:
<label for="user_password">Password</label>
<input id="user_password" type="password" size="30" name="user[password]">
<label for="user_password_confirmation">Re-Type Password</label>
<input id="user_password_confirmation" type="password" size="30" name="user[password_confirmation]">
Where is problem ?
Try don't use ''
$('.sign_up').validate({
rules: {
user[password]: {
required: true,
minlength: 6
},
user[password_confirmation]: {
required: true,
minlength: 6,
equalTo: "#user_password"
}
}
and use the same word for input's id and name.
I am using jQuery validation to attempt to keep a user from posting back unless he meets a couple of qualifications. But the required option doesn't seem to be keeping the form from submitting...
Here is jsFiddle with an example: jsFiddle
I double checked my jQuery code and it would seem as though it was working. jsFiddle says it valid code. So I am not sure what the hangup is?
Thanks
jQuery.validate uses names for the rules, not ids. So replace the ids with names in your input fields.
Also your form should be <form id="temp1"> and not <form id="#temp">.
Here's a link to your fixed code:
<form id="temp1">
<input type="text" name="HospitalFinNumber"/> Hospital Fin<br/>
<input type="text" name="DateOfBirth"/>Date of Birth<br/>
<input type="text" name="AdmitDate"/>Admit Date<br/>
<input type="text" name="Comment"/>Comment<br/>
<input type="submit" value="Save" class="button" id="btClick"/>
</form>
and the script:
$(document).ready(function () {
$("#temp1").validate({
rules: {
HospitalFinNumber: {
required: true,
minlength: 6
},
DateOfBirth: {
required: true
},
AdmitDate: {
required: true
},
Comment: {
required: function (element) {
return $(element).val().length < 4000;
},
maxlength: 4000
}
},
messages: {
HospitalFinNumber: 'Please Enter a Hospital Fin number',
DateOfBirth: 'Please enter a valid Date Of Birth',
AdmitDate: 'Please select an Admit Date',
Comment: 'Why dont you stop attempting to put in more than 4000 characters? Thanks...'
}
});
});