Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have made some validation on my form, and after all, I have some div in my input field with the id of this input field.
I would like to print errors in those divs. That means: if
some input is missing I want in html, before that input, set errorMessage in that div.
The problem is that library jquery.validate.js write error betwen radio elements and that doesn't look nice.
Any idea about how to realize this?
For Example (HTML):
<tr>
<td>
<label for='question2'>Some question</label>
</td>
<td valign='top'>
<input type='radio' name='question2' value='1'/>Answer1<br />
<input type='radio' name='question2' value='2'/>Answer2<br />
<input type='radio' name='question2' value='3'/>Answer3<br />
<input type='radio' name='question2' value='4'/>Answer4<br />
</td>
</tr>
<tr>
<td>
<div id='question23Error'></div>
//I WOULD LIKE TO PUT HERE MESSAGE FOR ALL INPUT INDIVIDUALLY
</td>
jQuery:
$(document).ready(function() {
$('#surveyData').validate({
errorContainer: '#errorbox', //THIS CODE IS ONLY USEFUL IF YOU HAVE A FORM WITH 5 INPUT'S, IF YOU HAVE 30 INPUTS THAN IT BRINGS ALL ERRORS AT BEGGINING OF THE FORM AND IT ISN'T TRANSPARENT
errorLabelContainer: '#errorbox ul', //
wrapper: 'li', //
rules: {
surname : {
required:true,
minlength: 2,
},
question1: {
required:true,
minlength: 2,
},
question2 : {
required: true,
},
question3 : {
required: true,
},
messages: {
surname : {
required: 'Enter surname!' ,
minlength: 'Surname should be longer!',
},
question1: {
required: 'Enter your opinion.',
minlength: 'Your opinion should be longer',
},
question2: {
required: 'Please choose radio button.',
},
question3: {
required: 'Please choose radio button',
},
},
};
});
});
try this....
errorPlacement:function(error, element)
{
if($(element).attr("name")=="question2")
{
$(element).parent().append(error);
}else
{
$(error).insertAfter(element);
}
},
Related
I have following input elements on my form and and validation form with jQuery validation plugin.
HTML:
<form name='frmUsers' id='frmUsers' method='post' action='#'>
<div>
<input type='text' name='name' id='name' placeholder='Name' />
</div>
<br />
<div>
<input type='text' name='fixed_budget' id='fixed_budget' placeholder='Fixed budget' />
</div>
<br />
<div>
<select name='budget' id='budget'>
<option value=''>Select your budget</option>
<option value='1000'>1000</option>
<option value='2000'>2000</option>
<option value='3000'>3000</option>
<option value='4000'>4000</option>
</select>
</div>
<br/>
<div>
<input id='save' type='submit' value='Save' />
</div>
</form>
jQuery validation:
$(document).ready(function () {
$("#frmUsers").validate({
onkeyup: false,
onfocusout: false,
ignore: [],
rules: {
"name": {
required: true
},
"fixed_budget": {
required: true
},
"budget": {
required: true
}
},
messages: {
"name": {
required: 'required'
},
"first_name": {
required: 'required'
},
"last_name": {
required: 'required'
}
},
errorPlacement: function (error, element) {
},
submitHandler: function () {
return false;
}
});
});
Now all elements are required fields but I have specific condition on Fixed budget (text box) and budget (select box).
For example:
When user click on submit, fixed budget and budget elements display with errors but (1) when user select any option on budget, set fixed budget field to not required. (2) when user input something on fixed budget set budget field to not required.
Here is my working JSFiddle: http://jsfiddle.net/mananpatel/85KR4/384/
Any Idea?
Thanks.
(1) when user select any option on budget, set fixed budget field to not required. (2) when user input something on fixed budget set budget field to not required.
In other words, you only require one of those two fields filled out.
Include the additional-methods.js file and use the require_from_group method.
rules: {
name: {
required: true
},
fixed_budget: {
require_from_group: [1, ".requiredGroup"]
},
budget: {
require_from_group: [1, ".requiredGroup"]
}
},
DEMO: http://jsfiddle.net/7om97gk8/
Note:
Use return false within the errorPlacement function if you want to suppress messages. Don't leave the function empty, as that's sloppy coding.
errorPlacement: function (error, element) {
return false;
},
Also, use the latest version of the plugin file as this will ensure the require_from_group method operates bug-free.
I don't understand why you are using the messages option when you've totally disabled these messages from displaying. You can safely remove messages in this case.
i am using Jquery validation plugin for validating the form.when validating the form for one element alignment is not proper.
If you see the image,for the city field icon + button alignment not proper when it validating the form. Because label error validation is displaying in between the input element and icon +. I need to display the error message below of the element.
My html code is like this for the city field
<tr>
<td align="right"><span class="mandetry">*</span> City:</td>
<td>
<div class="input-group" id="app_details">
<input type="text" class="form-control client_city" name="client_city" id="city_name" value="<?php echo set_value('client_city')?>">
<span class="input-group-btn">
<a class="btn btn-default" id='addnewcity' href="<?php echo base_url('addnewcity')?>"><i class="fa fa-plus-square"></i></a>
</span>
<div id="messageBox"></div> <!-- Here i would like to display message-->
</div> </tr>
js code is like this
$(document).ready(function(){
$('#add_client').validate({
errorClass: 'validation_errors',
debug: false,
rules: {
client_name:{required:true},
client_address:{required:true},
client_city:{required:true},
errorPlacement: function(error, element) {
if (element.attr("name") == "client_city" )
{
error.appendTo("#messageBox");
}
}
},
messages: {
client_name:{required:"The Client name is a required / mandatory field"},
client_address:{required:"The Client address is a required / mandatory field"},
client_city:{required:"The City is a required / mandatory field"},
}
});
});
Error message not appended to messageBox div.Is there any wrong with errorPlacement in js. For only city element i need to display the error message properly. For other form fields it shouldn't change.i am unable to solve this issue. Please suggest me. Thanks.
You are missing the else part, if it is not the client_city element then you need to insert the error after
$(document).ready(function () {
$('#add_client').validate({
errorClass: 'validation_errors',
debug: false,
rules: {
client_name: {
required: true
},
client_address: {
required: true
},
client_city: {
required: true
}
},
errorPlacement: function (error, element) {
console.log('dd', element.attr("name"))
if (element.attr("name") == "client_city") {
error.appendTo("#messageBox");
} else {
error.insertAfter(element)
}
},
messages: {
client_name: {
required: "The Client name is a required / mandatory field"
},
client_address: {
required: "The Client address is a required / mandatory field"
},
client_city: {
required: "The City is a required / mandatory field"
},
}
});
});
Demo: Fiddle
I have two radio buttons and a text input. I want one of the radios required for the text input to be then validated. I can disable the text input field unless selected, but I think it would be more user intuitive to allow text input first, and only error if they don't also select a radio.
The form is giving me back an error that the radios are required, but I don't want the remote check to kick in unless one of the radio buttons is selected.
So here's what I have...
JQuery:
jQuery( "#modalform" ).validate({
onkeyup: false,
onfocusout: false,
rules: {
'register_domain[]': {
required: true
},
chosen_domain: {
required: true,
minlength: 4,
remote: {
url: "check.php",
type: "post",
data: {
register_domain: function() {
return jQuery('input[name="register_domain[]"]');
}
}
}
}
},
messages: {
'register_domain[]': {
required: "Choose one"
},
chosen_domain: {
required: "Required input",
minlength: jQuery.validator.format("Please, at least {0} characters are necessary"),
remote: jQuery.validator.format("Invalid domain name: {0}")
}
}
});
Form Fields:
<label class="radio-inline">
<input type="radio" name="register_domain[]" id="own_domain" value="owned"> Own Domain
</label>
<label class="radio-inline">
<input type="radio" name="register_domain[]" id="new_domain" value="new"> Register Domain
</label>
<label for="register_domain[]" class="error" style="display:none;">Please choose one.</label>
<input type="text" size="50" placeholder="www." id="inputDomain" name="chosen_domain" class="form-control required" required="required">
Quote OP:
"I don't want the remote check to kick in unless one of the radio buttons is selected."
You can use the rules('add') and rules('remove') methods to toggle the remote rule within an external change handler...
$('input[name="register_domain[]"]').on('change', function() {
if ($(this).val() == "owned") {
$('input[name="chosen_domain"]').rules('remove', 'remote');
} else {
$('input[name="chosen_domain"]').rules('add', {
remote: {
url: "check.php",
type: "post",
data: {
register_domain: function() {
return jQuery('input[name="register_domain[]"]');
}
}
}
});
}
});
Guys I am using jQuery Validation plugin to validate the Input Text fields...
like this:
$("#formSettings").validate({
rules: {
sta: {
required: true,
},
crs: {
equalTo: "#password"
}
},
messages: {
email: {
required: "Please Provide Your Email Address",
email: "Provide Valid Email Address"
},
});
The issue: I need to match one textfield value with the other, each textfield have comma separated values and they should match before continuing, any idea how can I do that
like if textfield 1 is: 1,2,3,4,5,6 then textfield2 should match.
$('#selector').val().length
Above the basic jQuery version of .length After that you could do an if statement. Here is a brief untested test you try:
<input type="text" value="1,2,3,4,5" id="thing1">
<input type="text" value="1,2,3,4" id="thing2">
<input type="button" name="submit" value="submit" id="submit">
$('#submit').click(function(event){
var thing1 = $('#thing1').val().length;
var thing2 = $('#thing2').val().length;
if (thing1 == thing2) {
return true;
} else {
alert("Contents must have same length");
return false;
}
});
And the fiddle: http://jsfiddle.net/8XQB3/
I'm having problems with some checkbox validation.
I'm using the plugin validation for this: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
I have three checkboxes and at least one must be ticked. My initial form code for these checkboxes are:
<input type="checkbox" checked name="check_options" value="News">News
<input type="checkbox" checked name="check_options" value="Events">Events
<input type="checkbox" checked name="check_options" value="Promotions">Promotions
The validation rules are:
$("#commentForm").validate({
rules: {
email_options_name: {
required: true
},
email_options_company: {
required: true
},
email_options_country: {
required: true
},
email_option_email: {
required: true,
email: true
},
check_options: {
required: true,
minlength: 1
}
},
});
The validation here for check_options works fine. However the php script which processes the form will only print the value of the last check box (so if two or three were ticked only the last value is posted).
I revised my input names to fix this:
<input type="checkbox" checked name="check_options[]" value="News">News
<input type="checkbox" checked name="check_options[]" value="Events">Events
<input type="checkbox" checked name="check_options[]" value="Promotions">Promotions
This shows all of the values in the post. However I can't get the validation to work for it. If I put in my rules:
check_options[]: {
required: true,
minlength: 1
}
I get an Javascript error: SyntaxError: missing : after property id
If i leave it without the square brackets the validation doesn't happen.
Thanks for any help!
Use HTML like this:
<input type="checkbox" checked name="check_options[]" value="News" required minlength="1">News
<input type="checkbox" checked name="check_options[]" value="Events">Events
<input type="checkbox" checked name="check_options[]" value="Promotions">Promotions
and the javascript-
check_options: {
required: true,
minlength: 1
}