I'd love some help over here since I'm a rookie when it comes to jQuery.
I have this code right here:
$(document).ready(function(){
$("#subscribe").validate({
debug: false,
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: "*",
},
submitHandler: function(form) {
$.post('wp-content/themes/abc/process.php', $("#subscribe").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
Now, what im trying to do is to replace the message: * , with a highlight of the input field. So instead of showing the message * right after my e-mail input field, i'd like to add a class to my e-mail input field. Help would be much appreciated.
As victor k and Cory mentioned, jQuery validate adds a .error class to the element being validated if it doesn't pass the validation rules. It also adds a default message. If you want to remove the message and highlight the input field, you can set the message to the empty string and highlight the input field with CSS. Here's an example:
$(document).ready(function() {
$("#subscribe").validate({
debug: false,
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: "",
},
submitHandler: function(form) {
$.post('wp-content/themes/abc/process.php', $("#subscribe").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
#email.error {
border: 2px solid red;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form id="subscribe">
<input type="text" id="email" name="email">
</form>
Related
I recently removed the messages function from my validation. I then placed in jQuery validate's showErrors function so that I could get the borders for the required inputs to change to red. At this point, everything was working well until I added showErrors with it.
The reason for adding showErrors is that I wanted a simple message to appear, instead of multiple, and the borders to still show as red.
From my snippet below, you will see that only showErrors is currently working. Is there anyway to get both of these to work simultaneously. If so, how?
Alternatively, here is a jsfiddle
Adjusted JS
errorPlacement: function() {
return false;
},
showErrors: function(errorMap, errorList) {
$('#formErrors').html('All fields must be completed before you submit the form.');
this.defaultShowErrors();
},
submitHandler: function() {
submit();
},
$('#catalogRequestForm').validate({
ignore: [],
rules: {
first_name: {
required: true,
minlength: 2
},
last_name: {
required: true,
minlength: 2
},
address1: {
required: true,
minlength: 5
},
city: {
required: true,
minlength: 2
},
state: {
required: true
},
zip: {
required: true,
digits: true,
minlength: 5
},
email: {
required: true,
email: true
}
},
errorPlacement: function(){
return false;
},
showErrors: function(errorMap, errorList) {
$('#formErrors').html('All fields must be completed before you submit the form.');
},
submitHandler: function() {
submit();
},
});
.error {
border: 2px solid #b82222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<form method="POST" id="catalogRequestForm">
<input type="text" name="first_name" placeholder="First Name *">
<input type="text" name="last_name" placeholder="Last Name *">
<div id="formErrors"></div>
<input id="requestSubmit" type="submit" value="Submit">
</form>
Use this.defaultShowErrors() within showErrors to reactivate the default message behavior. Since you have a return false within errorPlacement, you only see your styling and not the messages.
showErrors: function(errorMap, errorList) { // <- disable default errorPlacement
$('#formErrors').html('All fields must be completed before you submit the form.');
this.defaultShowErrors(); // <- re-enable default errorPlacement
},
Read more: jqueryvalidation.org/validate/#showerrors
By only containing submit(), your submitHandler is completely broken. If that is your real function, then remove the submitHandler entirely because a regular form submit is already the default behavior. Otherwise, if you're doing something before the submit, then you'll need to pass a form argument and attach it to .submit().
submitHandler: function(form) { // <- pass 'form' argument into function
// do something, then submit
form.submit(); // <- attach 'form' argument to '.submit()'
}
DEMO:
$('#catalogRequestForm').validate({
ignore: [],
rules: {
first_name: {
required: true,
minlength: 2
},
last_name: {
required: true,
minlength: 2
}
},
errorPlacement: function() {
return false;
},
showErrors: function(errorMap, errorList) {
$('#formErrors').html('All fields must be completed before you submit the form.');
this.defaultShowErrors();
},
submitHandler: function(form) {
form.submit();
},
});
.error {
border: 2px solid #b82222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<form method="POST" id="catalogRequestForm">
<input type="text" name="first_name" placeholder="First Name *">
<input type="text" name="last_name" placeholder="Last Name *">
<div id="formErrors"></div>
<input id="requestSubmit" type="submit" value="Submit">
</form>
jsFiddle version: jsfiddle.net/ryoufcqh/
I need to validate another ready made bad words filter after validating first rules (blank fields). I have all codes in ready made, someone please help me to add this second validation in my page.
This is my jquery codes where I need to include the 2nd validation.
$(function() {
$("#review").focus(function() {
$("#comments").removeClass('hide')
});
$("#sky-form").validate({
rules: {
digits: {
required: true,
digits: true
},
name: {
required: true
}
},
messages: {
digits: {
required: 'Please enter a valid amount of Money'
},
name: {
required: 'Please enter your username',
}
},
submitHandler: function(g) {
$(g).ajaxSubmit({
beforeSend: function() {
$('#sky-form button[type="submit"]').attr('disabled', true)
},
success: function() {success funtion goes here}
This is the 2nd validation codes that I need to include on top. Mainly I need this function - bwords=badwords(textbox_val); - It will verify bad word's after blank fields is okay.
<script language="javascript" type="text/javascript">
function Message()
{
var textbox_val=document.form.textbox.value;
if(textbox_val=="")
{
alert("Please enter a message");
return false;
}
bwords=badwords(textbox_val);
if(bwords>0)
{
alert("Your message contains inappropriate words. Please clean up your message.");
document.form.textbox.focus();
return false;
}
}
</script>
Those both function is working but I just need to include both validation like 2nd one in the top first script.
Sorry for my bad Enlgish.
You can add a new rule in your code. I called this rule badWords and for me the
bad word is BAD so when you try to type BAD in the name field you will get the
validation error message.
$.validator.addMethod("badWords", function(value, element) {
if (value.trim().length == 0) {
return false;
}
if (value == 'BAD') {
return false;
}
return true;
}, "BAD WORD");
$(function () {
$("#sky-form").validate({
rules: {
digits: {
required: true,
digits: true
},
name: {
required: true,
badWords: true
}
},
messages: {
digits: {
required: 'Please enter a valid amount of Money'
},
name: {
required: 'Please enter your username',
}
}
});
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form id="sky-form">
<label for="ele1">Digits:</label>
<input type="text" id="ele1" name="digits"/>
<br/>
<label for="ele2">Name:</label>
<input type="text" id="ele2" name="name"/>
<br/>
<input type="submit" id="submit"/>
</form>
Can someone help me understand why onkeyup validation is not working? I have been staring at it too long! Thanks.
JSFiddle here.
Code:
$(document).ready(function () {
jQuery('#DSH0000000146FF').validate({
rules: {
dish_name: {
required: true
},
dish_description: {
required: true
}
},
messages: {
dish_name: {
required: "Please enter a name, no longer than 80 characters."
},
dish_description: {
required: "Please enter a description, no longer than 240 characters."
}
},
submitHandler: function (form) {
if(jQuery('#DSH0000000146FF').validate()){
alert("SUBMITTED!");
}
else{
}
}
});
});
Add submit button to form
<textarea id="DSH0000000146d" name="dish_description"
class="textarea-comment dish_description" maxlength="240">More testing
</textarea><br/>
<input type="submit"></input> <!-- Add this line -->
jsfiddle
hoping you can help me out! I'm having trouble removing an error once the user has corrected their error. For example, validating an email field. every character press keeps appending an error as many times as necessary until it's validated. Here is a snippet:
$( "#bookings" ).validate({
rules: {
email: {
required: true,
email: true
},
message: {
email: {
required: "field is required",
email: "invalid email"
},
errorLabelContainer: $("ul", $('div#results')), wrapper: 'li',
errorContainer: $('div#results'),
errorPlacement: function(error, element) {
$('#results').append(error);
}
success: function(error){
error.remove();
}
});
<div id="results">
</div>
<form name="bookings" id="bookings" method="post" action="#">
<div class="item" style="clear:left;">
<label>E Mail *</label>
<input id="femail" name="email" type="text">
</div>
</form>
What I want to achieve is for the error to appear ONCE.So far I have successful removal. but the error keeps appending itself over and over again until validation is successful.
Try this out:- http://jsfiddle.net/adiioo7/hGNRG/
JS:-
$("#bookings").validate({
rules: {
email: {
required: true,
email: true
},
message: {
email: {
required: "field is required",
email: "invalid email"
},
errorLabelContainer: $("ul", $('div#results')), wrapper: 'li',
errorContainer: $('div#results'),
errorPlacement: function (error, element) {
$('#results').append(error);
},
success: function (error) {
error.remove();
}
}
}
});
Get rid of your errorLabelContainer,wrapper,errorContainer,errorPlacement, and success options and put this instead:
wrapper: 'li',
errorLabelContainer:$('#results')
The stuff you had is basically duplicating (poorly) what the Validation plugin does by default.
See it working here: http://jsfiddle.net/hGNRG/1/ (hat tip to #wiz-kid for creating the fiddle).
I'm new to jQuery.
Working with jQuery validation plugin & cufon at the same time is giving me really hard time.
Basically, I want to detect event once jQuery Validation did what it had to do and call Cufon.refresh() straight after it.
$('#commentForm').validate({
rules: {
password: {
required: true,
minlength: 8,
maxlength: 8,
number: true
},
}
});
We are expecting <label class="error"> SOME TEXT </label> when form is not valid.
And once that created I want to Cufon.refresh() on that label created by jQuery Validation.
How can I detect when jQuery Validation is done, and call something based on that event?
Any help much appreciated.
Regards,
Piotr
Thanks to #Ariel - if there is a 'success' there has to be a 'not-success' as well, so..
Working code:
$('#commentForm').validate({
rules: {
password: {
required: true,
minlength: 8,
maxlength: 8,
number: true
}
},
showErrors: function(errorMap, errorList) {
this.defaultShowErrors();
Cufon.refresh();
//alert('not valid!')
},
success: function() {
//alert('valid!')
}
});
Thanks again for the idea!
Use the success option:
$('#commentForm').validate({
rules: {
password: {
required: true,
minlength: 8,
maxlength: 8,
number: true
},
}
success: function() { .... }
});
Note that you have an extra comma after the close brace for the password object. This will give an error in IE.
<script src="js/validate/jquery-1.11.1.min.js"></script>
<script src="js/validate/jquery.validate.min.js"></script>
<script src="js/validate/additional-methods.min.js"></script>
<script>
jQuery.validator.setDefaults({
success: "valid"
});
var form = $("#myform");
form.validate({
rules: {
name: {required: true, minlength: 2},
lastname: {required: true, minlength: 2}
}
});
$("#button").click(function() {
if(form.valid() == true ) { // here you check if validation returned true or false
$("body").addClass("loading");
}
})
</script>
submitHandler: { function(){ bla bla }}
This will allow you to execute code upon the completion of the validate. you will need to place a submit form snippet though, since it replaces the default handler.
EDIT:
// specifying a submitHandler prevents the default submit
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
You can use either to do what you want. submitHandler allows you to stop the submit and execute code instead ( you can possibly use it to perform code BEFORE you submit it ) or success to execute code after the submit.
Put it inside the errorPlacement option.
errorPlacement: function(error, element) {
error.appendTo( element.parent() );
yourCodeHere();
}
$(document).ready(function() {
$('#commentForm').submit(function(){
var validationResponse = $('#commentForm').valid();
if(validationResponse) {
// when true, your logic
} else {
// when false, your logic
return false;
}
});
$("#commentForm" ).validate({
rules: {
"first_name": {
required: true
}
},
messages: {
"first_name": {
required: "First Name can not be empty"
}
}
});
});