Parsley not using custom error container for radio button group - javascript

I am using Parsley JavaScript validation library in a Spring MVC project. I am trying to validate a 'required' radio button group.
I want to display the validation message after the last radio button in the group. To achieve this i am adding data-parsley-errors-container="#element" attribute to the last radio button but Parsley is not using this custom error container. The error message wrongly gets displayed after the first radio button. In my case the error container will be added dynamically to the radio button group, but it's not working even when i am adding it inline.
Please find the JSFiddle sample code here https://jsfiddle.net/8ja2sm98/9/
<script>
$(document).ready(function() {
$("#commentForm").parsley();
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<div class="form-group required">
<label for="gender" class="control-label">Gender</label>
<div class="radio">
<label><input id="gender1" name="gender" type="radio" value="M" data-parsley-multiple="gender" data-parsley-id="17">Male</label>
</div>
<div class="radio">
<label><input id="gender2" name="gender" type="radio" value="F" data-parsley-multiple="gender" data-parsley-errors-container="#genderError" required>Female</label>
</div>
<span id="genderError" style="background-color:blue;"></span>
</div>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</form>

You're missing data-parsley-errors-container="#genderError" on the "male" input.

Related

JQuery UI buttonset not working on radio buttons when I associate runat="server" attribute

I am creating a demo application, where I want to use radio buttons as buttons. For that I am using JQuery UI buttonset widget. It was working fine before but the actual problem began when I introduced the attribute runat="server", in order to retain the state during a post back. But after applying the attribute, buttonset widget stopped working on radio buttons.
So, I just want a solution where I can retain the state of the radio button controls and at the same time apply buttonset widget on them.
<div id="genderOptions">
<input type="radio" id="genderMale" value="Male" name="gender" />
<label for="genderMale" >Male </label>
<input type="radio" id="genderFemale" value="Female" name="gender"/>
<label for="genderFemale" >Female </label>
</div>
Output without runat="server" attribute
<div id="genderOptions">
<input type="radio" id="genderMale" value="Male" name="gender" runat="server" />
<label for="genderMale" >Male </label>
<input type="radio" id="genderFemale" value="Female" name="gender" runat="server" />
<label for="genderFemale" >Female </label>
</div>
This is the final output after specifying the attribute runat="server"
The runat="server" attribute used to dynamically change id and name attributes. Verify your rendered markup. Probably you will see something like
<input type="radio" id="ctl00_genderMale" value="Male" name="ctl00$gender" />
I assume you specify the input fields using ids in your JS which initializes the buttonset widget. Try to use tag or class selectors instead:
$("#genderOptions").buttonset({
items: "input[type=radio]"
});

Turn Off Validation for Disabled Form Controls Angular

I have a button that is set to be disabled until the form is valid. However, depending on the situation some of the form fields are also disabled. My problem is, I need the user to only be required to fill in non-disabled form fields but angular doesn't seem to be validating the disabled fields.
<button ng-click="form.checkVerify(); appCtrl.pageLoad('spec')" ng-disabled="checkVerifyForm.$invalid" class="btn btn-lg btn-success pull-right">Complete</button>
<form name="checkVerifyForm">
<div class="col-md-6">
<fieldset ng-disabled="!form.dataStore.reqMake">
<label for="makeRec">Maker Recourse</label>
<div class="form-group">
<label class="radio-inline">
<input ng-change="form.justify()" ng-model="form.verify.mRec" type="radio" name="makeRec" id="makeRecYes" value="1" /> Yes
</label>
<label class="radio-inline">
<input ng-change="form.justify()" ng-model="form.verify.mRec" type="radio" name="makeRec" id="makeRecNo" value="0" /> No
</label>
<span id="helpBlock" class="help-block">Is there adequete recourse...</span>
</div>
Now I have seen some pretty intense directives that accomplish the task, but is there something simple that can be done in the controller to overcome this specific situation?
You can use e.g. ng-required to achieve that.
<input ng-change="form.justify()"
ng-model="form.verify.mRec"
type="radio"
name="makeRec"
id="makeRecYes"
value="1"
ng-required="form.dataStore.reqMake" /> Yes
AngularJS input documentation

div disappears when page refreshed

Can't figure out why the below piece of code makes the textfield disappear upon page refresh (when 'No' radio button selected).
Also, after the page is refreshed the default radio button doesn't get selected.
Forcing refresh, fixes the problem, though.
Any ideas?
<html>
<body>
<div class="editfield">
<div id="field_1">
<label>
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">Yes
</label>
<label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<body onLoad="document.getElementById('radio-2_id').checked=false; document.getElementById('radio-1_id').checked=true;">
<div class="editfield">
<div id="field_1">
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">
<label for='radio-1_id'>
Yes
</label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">
<label for='radio-2_id'>
No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
just a short recap:
1. on page refresh the div should disappear (all css and js and html that was dynamically set / added is removed) and the selected radio button should be the first (Yes)
2. tested this on all major browser and it works
3. still can't figure out why it wasn't working on Mozilla and IE without the JS refresh
I moved the radio buttons out of the labels to see if that impacted the refresh in any way and it didn't. Also, I removed an extra </div> that was in the original code.
The page refresh will initiate the page in its' original state. So the
style="display:none"
will be reactivated on the div and will be hidden and the "Yes" button will also be reenabled
what i did have a textarea insert number first ,0 make it readonly
then it will not disappear on refresh,to insert document.getElementById("demo").readOnly=false,and true to enable readonly

How to check a single radio button using jquery/java script?

I would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act
Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>

Javascript: Get selected radio and paste it on a label tag with jQuery

I have a gender selection radio:
<div class="label-inputs" name="userFieldDiv" id="genderUserFieldDiv">
<label class="required">Sexo</label>
<input type="radio" class="check" value="F" name="userDto.gender" id="userDto.gender0">
<label for="userDto.gender0">Femenino</label>
<input type="radio" class="check" checked="checked" value="M" name="userDto.gender" id="userDto.gender1">
<label for="userDto.gender1">Masculino</label>
</div>
I'm trying to use a jQuery script to get the selected radio and paste it inside of a label.
$("#userDto\\.gender").change(function() { $("#genderLabel").html(this.value); });
The problem is that I'm using Spring, and when I use formRadioButton, it generates the id: userDto.gender but adds a 0 and 1 to the options. So I'm out of ideas about how to make the next HTML to get the value of the selected radio.
<div name="userLabelDiv" id="genderUserLabelDiv">
<label class="required">Sexo</label>
<label id="genderLabel">Masculino</label>
</div>
Could someone guide me through the problem? I can't find where is my error in the JS code. Thank you
The ids must be unique so what Spring is doing is just fine. Just use the name attribute for the selector instead of the id.
$('input[name="userDto\\.gender"]').change( ... )

Categories

Resources