I want to create a wizard with a form validation with bootstrap. I use the Twitter Bootstrap Wizard Plugin from http://vadimg.com/twitter-bootstrap-wizard-example/. It uses jQuery Validate Plugin.
My problem is now that the validation of radio buttons does not work. I can skip through the "tabs" even if no radio button is checked.
Has anyone an idea what I've made wrong?
This is my Javascript-Code:
<script>
$(document).ready(function() {
var $validator = $("#commentForm").validate();
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-pills',
'onNext': function(tab, navigation, index) {
var $valid = $("#commentForm").valid();
if(!$valid) {
$validator.focusInvalid();
return false;
}
}
});
window.prettyPrint && prettyPrint()
});
</script>
My input elements look like this here:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input class="required" id="question21" name="question2" required="" type="radio"> 1</label>
<label class="btn btn-primary">
<input id="question22" name="question2" type="radio"> 2</label>
<label class="btn btn-primary">
<input id="question23" name="question2" type="radio"> 3</label>
<label class="btn btn-primary">
<input id="question24" name="question2" type="radio"> 4</label>
<label class="btn btn-primary">
<input id="question25" name="question2" type="radio"> 5</label></div>
Here the entire code of the site:
http://chopapp.com/#aj3u0kz1
Thanks in advance!
You've declared the required rule twice in your HTML markup...
<input class="required" id="question21" name="question2" required="" type="radio">
1) By class: class="required" is declaring the name="question2" radio button set as required.
2) By HTML5 attribute: required="" is declaring the name="question2" radio button set as not required.
Apparently the jQuery Validation plugin gives precedence to the HTML5 attribute.
You only need to use one method of declaring the rule. Use class or HTML5 attribute, not both. If you decide to keep the HTML5 attribute, then use required="required".
EDIT:
Quote OP's Comment:
"... But either class="required" or required="required" works :-( Do you have another idea?"
Did you mean to say "neither" of those works? Both of those work perfectly fine, as well as another method...
Rule declared by class="required": http://jsfiddle.net/MHWmx/
Rule declared by required="required": http://jsfiddle.net/MHWmx/1/
Rule declared within .validate(): http://jsfiddle.net/MHWmx/2/
Otherwise, there's a problem in code you have not shown.
Related
I am using Bootstrap 4 and would like to use the radio and checkbox button groups but the buttons are showing the actual radio and checkbox UI elements as shown below:
The example above is taken directly out of the documentation. I have tried removing and re-installing Bootstrap 4, removing the site.css file and the open-iconic css all to no avail. I haven't been able to find any links describing this problem. I am using Chrome version 64.0xxxx and VS 2017 MVC5.
Here is the loading sequence of the CSS and JS files.
Any help would be most appreciated as I have spent hours trying to track this problem down.
The example I was using did not have the "btn-group-toggle" as shown below.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
I have a Questionnaire form which is break down in steps by using JQuery steps plugin. In the process of form submission there is a certain point where i need to remove steps. When i use "destroy" JQuery steps method, the values filled in the form are lost.
For example:
<form>
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
</form>
I am using following steps:
Convert form into Jquery steps
Opening this form in Simple modal dialog.
User fill this form and close modal dialog.
I am using "destroy" jQuery steps method after closing dialog.
When user re-open simple modal dialog again then i am converting this form into JQuery steps. At that point user see that all filled values in the form are lost.
The problem is at the 4th step. User have filled form at 3rd step. When i converted in back to original HTML, values given by user are lost.
Expected values at 4th step
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="Ishwar Lal" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" selected='selected' />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
but output is:
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
I need to remove JQuery steps from from with filled values. I have read JQuery documentation but not found any idea about this.
I think that you must to store data before you destroy the component. When you destroy a component it is destroyed, nothing else what to do.
If you store the data , then destroy object, and then initialize object with the data you stored. You can store in an array/object/variable, or you can store in sessionStorage / localStorage for use in other pages.
Hi im at coding a form and i needed a validation form for my radio and checkbox inside my form so i searched around the net and found out that jquery 1.3+ has class="required" tag that does exactly what i wanted but
i have this section of radios :
<label class="label" type="radio" name="sloganch" >Does your slogan need to be incorporated in your Logo Design ?</label>
<div class="inline-group">
<label class="radio"><input type="radio" name="radio-inline" class="required" ><i></i>Yes</label>
<label class="radio"><input type="radio" name="radio-inline" ><i></i>No</label>
<label class="radio"><input type="radio" name="radio-inline"><i></i>Maybe</label>
<label class="radio"><input type="radio" name="radio-inline" ><i></i>I decide later</label>
</div>
And if i put the class="required" on the first radio when it calls this function it distort my radios by attaching " This field is required" to my first radio
and distort the complete line of radios .
Is it possible somehow to fix this to set for eg the " This field is required" under the complete row ? thanks in advance
this should work
$("input:radio:not(:first)").addClass("test");
EDIT
This should work i have also included a js fiddle for your reference
the above code will add class test to all the radio buttons except the first
JS Fiddle
This has been bugging me for a while now. I'm trying to prevent users from clicking on a radio button depending if the user has the access to do so. The first solution was to do the following:
Without disabled
<input type="radio" name="my_radio1" id="abc1" value="5">
<input type="radio" name="my_radio1" id="abc2" value="0">
<input type="radio" name="my_radio1" id="abc3" value="1" checked>
With disabled with pre-selection
<input type="radio" name="my_radio2" id="abc1" onclick="return false;" value="5">
<input type="radio" name="my_radio2" id="abc2" onclick="return false;" value="0">
<input type="radio" name="my_radio2" id="abc3" onclick="return false;" value="1" checked>
With disabled and no pre-selection
<input type="radio" name="my_radio3" id="abc1" onclick="return false;" value="5">
<input type="radio" name="my_radio3" id="abc2" onclick="return false;" value="0">
<input type="radio" name="my_radio3" id="abc3" onclick="return false;" value="1">
As shown here: http://jsfiddle.net/93CqR/6/
This works great for radio buttons ALREADY checked but doesn't work for boxes that haven't been checked (as shown in example 3 above). Are there any known workarounds to this?
Chrome and IE behave differently with this
You should add a 'disabled' attribute to the ones not selectable. You don't really need the javascript.
see http://jsfiddle.net/Ma6TA/
<input type="radio" name="my_radio2" id="abc1" value="5" disabled>
<input type="radio" name="my_radio2" id="abc2" value="0" disabled>
<input type="radio" name="my_radio2" id="abc3" value="1" checked disabled>
Update I don't know the actual use case here, but if you aren't already, the actual check for this should be done on the server. Disabling or hiding the input from the user with javascript will enhance the UX, but a nefarious user could get around these things.
I would use javascript to show/hide the elements that users have access to. For 2 reasons.
1) It's a better user experience if they can only see the form elements they can manipulate.
and more importantly
2) a disabled form field WILL NOT show up in the post/get array. I've had issues with this in the past and it is a very frustrating problem if you don't know why you're fields aren't coming through.
it could be as simple as wrapping js code in a php conditional ie...
<?php if($userCantSeeThese): ?>
<script>
$('.classOfElementsUserShouldntSee').hide();
</script>
<?php endif; ?>
I cannot get my jquery code to auto select a radiobox.
Here is my html:
<div class="formField rsform-block rsform-block-existingcustomer" style="margin-bottom: -22px;">
<!--<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" /><label for="existingCustomer0">Yes</label><input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" /><label for="existingCustomer1">No</label><br/>
<span id="component100" class="formNoError">Please tell us if you're an existing customer.</span>-->
Are you an existing client?<br>
<label for="existingCustomer0" class="radio"><span class="icon"></span><span class="icon-to-fade"></span>Yes
<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" class="addRadio">
</label>
<label for="existingCustomer1" class="radio checked"><span class="icon"></span><span class="icon-to-fade"></span>No
<input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" class="addRadio" style="display:none;">
</label>
</div>
and here is a snippet of the jQuery code that is supposed to do it:
if(aaid) {
var num_one = aaid;
jQuery('input[value="Yes"]').prop('checked', true);
Does anyone see the problem? I am trying to autoselect the "yes" checkbox, so that it will activate the next part which is create a dropdown menu.
Thanks in advance! :)
Try this:
$(document).ready(function () {
$('input:radio[name="form[existingCustomer]"][value="Yes"]').attr('checked',true);
//OR
$('input:radio[name="form[existingCustomer]"][value="Yes"]').prop('checked',true);
});
Example
I see a couple issues with your code here.
1. input hmtl does not have proper ending/end tag
2. not sure why you wrap it around the label
3. Be sure to put your jquery code in document ready so that it checks the radiobox when the page is loaded.
4. in you html code, you are pre-setting the No radio to be checked. Is that on purpose? It looks like you set it to no and then using jquery to set it back to yes.
Anyway, try attr instead of prop. Something like this.
$('input:radio[value="Yes"]').attr('checked', true);