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/
Related
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
Unable to figure this one out...
In the below form, all of the inputs disappear as soon as validation passes on all of them, leaving nothing but the submit button visible.
For example, if I click "submit" on this form before completion, all unfinished fields are given the ".incomplete" error class to mark them incorrect. If I then go through the inputs one by one and complete them, the error class disappears. But as soon as the last-remaining input is completed and the error class is removed, all of the inputs disappear leaving just "submit".
I can tell it has something to do with the .incomplete CSS class, which is applied whenever the user clicks "submit" without having all fields completed properly. I can't figure out what is causing this behavior however. Any help or ideas are greatly appreciated! Sorry for the length of his code snippet but I figure too much information is better than not enough in this case.
Validation rules:
$(document).ready(function() {
$("#form").validate({
errorLabelContainer: ".textbox",
keyup: false,
onfocusout: false,
onclick: false,
errorElement: "input",
errorClass: "incomplete",
rules: {
organization: {
defaultInvalid: true,
required: true,
minlength: 2
},
firstname: {
defaultInvalid: true,
required: true,
minlength: 2
},
lastname: {
defaultInvalid: true,
required: true,
minlength: 2
},
email: {
defaultInvalid: true,
required: true,
email: true
},
phone: {
defaultInvalid: true,
required: true,
minlength: 10,
},
},
});
});
Form HTML:
<div id="form">
<div id="form_title">REQUEST INFO</div>
<form id="form" name="form_container" action="#">
<!-- fields -->
<input id="organization" class="textbox" type="text" name="organization" minlength="2" value="Organization"/>
<input id="firstname" class="textbox" type="text" name="firstname" minlength="2" value="First Name"/>
<input id="lastname" class="textbox" type="text" name="lastname" minlength="2" value="Last Name"/>
<input id="email" class="textbox" type="text" name="email" value="Email"/>
<input id="phone" class="textbox" type="text" name="phone" value="Phone"/>
<!-- submit button -->
<input id="button" name="submit" class="button" type="submit" value="submit">
</form>
</div>
I'm using version 1.9 of the jQuery validation plugin.
First of all, have you added custom method
jQuery.validator.addMethod("defaultInvalid", function(value, element)
{
return !(element.value == element.defaultValue);
});
Then correct your validation JS, you have extra commas at the bottom
(document).ready(function() {
$("#form").validate({
errorLabelContainer: ".textbox",
keyup: false,
onfocusout: false,
onclick: false,
errorElement: "input",
errorClass: "incomplete",
rules: {
organization: {
defaultInvalid: true,
required: true,
minlength: 2
},
firstname: {
defaultInvalid: true,
required: true,
minlength: 2
},
lastname: {
defaultInvalid: true,
required: true,
minlength: 2
},
email: {
defaultInvalid: true,
required: true,
email: true
},
phone: {
defaultInvalid: true,
required: true,
minlength: 10
}
}
});
});
Also i suggest you to try this way:
$('#Form').validate({
onchange: false,
errorLabelContainer: $('.error-container'),
wrapper: "p",
rules: { ...//specify rules here }
});
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...'
}
});
});