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
}
Related
I am trying to show checkboxes checked or unchecked based on certain condition. for eg:
$scope.userRoles = {"grants" : [
"Permission",
"View",
"Update",
"Delete"
]}
On the HTML part i have added the following code:
<div ng-repeat="p in userRoles">
<input type="checkbox" ng-model="p.grants.indexOf('Delete') != -1?true:false" ng-change="AddRemovePermission(p,'Delete')" />
</div>
If i use ng-checked instead of ng-model than it works fine, but i will not get 2 way binding with that. Also i know we cant use expressions like above in ng-model.
Can anybody help on how this can be done. The only condition is if user has grants than the checkbox should be checked else not, and when clicked on checkbox it should be changed to checked or unchecked accordingly and gets added in the userRoles object. Cant use directive as well.
Thanks.
The problem is your model. You must send boolean to backend, this can be a solution:
In view:
<div ng-repeat="role in userRoles.grants">
<input type="checkbox" ng-model="role.checked" />
</div>
And in controller:
$scope.userRoles = {"grants" : [
{"permission": "Permission", checked: true },
{"permission": "View", checked: false },
{"permission": "Update", checked: true },
{"permission": "Delete", checked: true }
]}
I've a simple HTML input:
<input id="email" name="email" value="" type="email">
and validate it using JQuery validate:
$('form').validate({
rules: {
email: {
required: 'true',
email: 'true'
}
}
});
The rules are applied, I can see them in $('#email').rules(). However when I later run $('#email').valid() or $('form').valid() the input is marked as valid when empty, but invalid when an invalid email address is entered.
How do I ensure the input is invalid when empty?
Relevant JSfiddle: https://jsfiddle.net/ycypuy86/
I usually set these without quotes?
rules: {
email: {
required: true,
email: true
}
}
remove quotes on your fiddle and it works.
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 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[]"]');
}
}
}
});
}
});
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);
}
},