I have the following markup:
<input id="davcardholder-yes" data-val="true" data-val-required="The CustomerDVACardHolder field is required." name="CustomerDVACardHolder" type="radio" value="Yes">
<label for="davcardholder-yes"><span></span> Yes </label>
<input id="davcardholder-no" name="CustomerDVACardHolder" type="radio" value="No">
<label for="davcardholder-no"><span></span> No </label>
And in another place:
<input data-val="true" data-val-required="The CustomerFirstName field is required." id="CustomerFirstName" name="CustomerFirstName" type="text" value="">
jQuery unobtrusive validation is working for the latter, but not the former -- i.e. it's not working for the radio buttons.
It's not a display issue - it's actually allowing the form to submit, and is not adding class 'input-validation-error' to the first radio button.
Anyone know what might be causing this to fail? Using jQuery 1.8, jQuery validate 1.11.1 and jQuery unobtrusive (no version). Thanks!
Related
Im using spring-boot back-end with the fontend thyme-leaf . But the problem is when im putting Boolean data type in a radio button then the value which is set to 0 is automatically checked in the font end, event if i try to add th:checked="unchecked" its not working. My code is given bellow
<div class="form-group">
<label for="isDownloadable"> Is Downloadable</label> <br>
<input type="radio" th:field="*{isDownloadable}" value="1" th:checked="checked">Yes
<input type="radio" th:field="*{isDownloadable}" value="0"> No<br>
</div>
As here iv tried to cheack Yes radio button but its checked the No radio button in the front end.How to solve this problem ?
here is the output of my code given
If you want to use 0 and 1, you put need to condition and show data.Solution is
<div class="form-group">
<label for="isDownloadable"> Is Downloadable</label> <br>
<input type="radio" value="1" th:checked="${history.Shift == 1} ? ${true}">Yes
<input type="radio" value="0" th:checked="${history.Shift == 0} ? ${true}"> No<br>
</div>
for the below element html code i ve tried multiple ways, Radio button is not choosable at all. Can someone help
<fieldset class="usa-fieldset-inputs usa-sans">
<input type="radio" name="certificate_type" id="idvalue" value="xx">
<label for="add_certificate">xxxx(Review requirements)
</label>
<input type="radio" name="certificate_type" id="ddddd" value="xxx">
<label for="add_certificate">xxxxx (Review requirements)
</label>
tried all below
choose("certificate_type")
choose("idvalue")
page.find(:xpath, '//*[#id="idvalue"]').click
and other xpaths also. Xpath seems to be good.
I am using jquery 1.8.3 and jquery validation plugin 1.13.1 which is a latest validation version. my form looks like this,
<form method="post" class="contact-form" id="frmB5B976FFD59E885191DA4D572F6F773A" action="?nocache=1#frmB5B976FFD59E885191DA4D572F6F773A" novalidate="novalidate"><input type="hidden" value="true" name="useProtect">
<input type="hidden" value="0" class="cffp_mm" name="formfield1234567891" id="fp6939F8D3-F46A-C008-37330D6AA1B0BED2">
<input type="hidden" value="" class="cffp_kp" name="formfield1234567892" id="fp6939F8D4-FE37-FF6D-AD27DC356205A886">
<input type="hidden" value="39890522,19894825" name="formfield1234567893" id="fp6939F8D6-F82F-92B8-A4B0BA6A966190FA">
<label style="display:none">Leave this field empty <input type="text" value="" name="formfield1234567894" id="fp6939F8D7-AB86-5202-464CA191E50CE678"></label>
<p class="column one-half"><input type="text" required="" placeholder="Please Enter First Name" name="fname" id="fname" aria-required="true"></p>
<p class="column one-half last"><input type="text" required="" placeholder="Please Enter Last Name" name="lname" aria-required="true"></p>
<p class="column one-half"><input type="email" required="" placeholder="Please Enter Email" name="email" aria-required="true"></p>
<p class="column one-half last"><input type="text" required="" placeholder="Please Enter Phone Number" name="tel" aria-required="true"></p>
<p class="clear"><textarea rows="3" required="" placeholder="Please Enter Message" name="comment" cols="5" aria-required="true"></textarea></p>
<p><input type="submit" id="submitme" value="Submit" name="submitme"></p>
</form>
And my validations looks like this -
var ruleSet = {required: true};
jQuery( "#frmB5B976FFD59E885191DA4D572F6F773A" ).validate({
rules:{
fname: ruleSet,
lname: ruleSet,
email: { required: true, email: true },
phone: { required: true, phoneUS: true },
message: { required: true }
}
});
The form is in forms section in mura admin. I created that using form editor. I am unable to understand why the form gets submitted even when there are invalid fields, Could it be because HTML5 validations are turned off by validation plugin and Mura just submits the form no matter if the form is valid or invalid! But then why doesn't the validation plugin do preventdefault() if the validations fails?
Also, I tried using JSFiddle for the validations and it works there. Please help me out. Thanks.
FYI. The above form html is the one from "page source" and not actual form from the form editor. That is why all the weird form id and cffp_mm etc.
To those who came here searching for the same issue. I added novalidate="novalidate" onsubmit="return true; to the form tag and it did the trick. Mura was overriding the jquery validations, even though jQuery Validation plugin was putting the novalidate attribute in form tag, so I had to manually add novalidate there. I hope this helps.
I have a validation error in my HTML form, where there are radio buttons (appleiphonebuyers.com/sell.html). Error reads:
Line 155, Column 44: The for attribute of the label element must refer to a form control.
… <label for="condition" class="inline"><span class="formstar">*</span> Conditi…
Is there another way I should apply a label to the group of radio buttons besides using "label for"?
UPDATE:
Here is the HTML for those radio buttons:
<LABEL class="inline" for="condition"><SPAN class="formstar">*</SPAN> Condition</LABEL> <INPUT class="conditionselect" type="radio" name="condition" value="Good" />Good <INPUT class="conditionselect" type="radio" name="condition" value="Okay" />Okay <INPUT class="conditionselect" type="radio" name="condition" value="Bad" />Bad <BR />
It just occurred to me that maybe I have to change the INPUT class to "condition" so it's the same as the "label for" attribute? I thought it was the name that had to be the same but maybe it's the class? –
Is there another way I should apply a label to the group of radio buttons besides using "label for"?
A <label> labels a single form control, not a group of them.
Use <fieldset> and <legend> for a group of font controls.
<fieldset>
<legend> Condition </legend>
<input type="radio" name="condition" id="condition_1" value="1">
<label for="condition_1"> 1 </label>
<input type="radio" name="condition" id="condition_2" value="12>
<label for="condition_2"> 2 </label>
<input type="radio" name="condition" id="condition_3" value="13>
<label for="condition_3"> 3 </label>
</fieldset>
Maybe you have a typo on it, the FOR attribute should always be exactly the same as in the ID.
Other than that I don't see nothing wrong. You'd have to feed us some more HTML to be able to help more thoroughly.
The for atribute must map to the input element's ID, and not its name.
I have a form that is served via Ajax from the server when a button is clicked. It pops up in a jquery dialog.
<form onsubmit="hideModal();return getAJAX(this);">
<input type="hidden" name="action" value="updateUserNotes">
<input type="hidden" name="userid" value="20312">
<hr/>
<B>Flags:</B><BR/>
<input type="radio" name="flag" value="none" checked> <img src="images/icons/grey_flag.png"> No Flag<BR>
<input type="radio" name="flag" value="green" > <img src="images/icons/flag_green.png"> Green Flag<BR>
<input type="radio" name="flag" value="red" > <img src="images/icons/flag_red.png"> Red Flag
<B>NOTES:</B><BR>
<textarea name="usernotes" cols="80" rows="10"></textarea>
<input type="submit" value="Save Notes">
</form>
This is the code that my script sends back to display the form. With the HR in there, the form will not submit when you click "save notes". It does not throw a javascript error, it simply does not submit.
If I remove the horizontal rule the form submits 100% fine.
Anyone know what might be causing this? It only appears to affect IE9. I cannot replicate it in Chrome or Firefox or earlier versions of IE9.
I think it has something to do with IE9's strictness, but I can't figure out how the horizontal rule is messing anything up.