I'm 95% there in writing an HTML5 'required' attribute fallback, I'm having a small issue and I've come to the end of the road in my knowledge!
What works: Detecting 'required' attributes, looping through and alerting the user in several ways (onsubmit and entering data into the field).
Problem: I'm taking the form one step further and want to make checkboxes and radio buttons required as well. By doing this, I need to add a required attribute to each radio/checkbox. I need to find out how to differentiate the group of buttons, as currently you need to tick/untick both sets of buttons for the form to validate and let you submit. So in a nutshell, I have three required radios for example, each will need to be ticked, how can I detect whilst looping through the inputs that one of the required radios/checked is ticked - I assume this would be done by matching the 'name' attribute, and if none in the name group are selected then alert just one error.
Here's the state of my loop, you can see I detect the input type as well, just unsure of the next steps forward. a jsFiddle is also below if anyone would be kind enough to help out. Many thanks.
// loop through class name required
$('.required').each(function () {
// this
var self = $(this)
// check shorthand if statement for input[type] detection
var checked = (self.is(':checkbox') || self.is(':radio')) ? self.is(':not(:checked)') : false
// run the empty/not:checked test
if (self.val() === '' || checked) {
// show error if the values are empty still (or re-emptied)
// this will fire after it's already been checked once
self.siblings('.form-error').show()
// stop form submitting
e.preventDefault()
// if it's passed the check
} else {
// hide the error
self.siblings('.form-error').hide()
}
})
Here's my jsFiddle: http://jsfiddle.net/zykF9/
With class selectors you could archive it http://jsbin.com/owokuw/1/edit
UPDATE
to make easier to understand, here a update:
<input type="radio" name="myradio" class="myradio" />
<input type="radio" name="myradio" class="myradio" />
<input type="radio" name="myradio" class="myradio" />
<input type="radio" name="myradio" class="myradio" />
<input type="hidden" id="selectedRadioYes" />
<input type="button" id="botton" value="Botton" />
Jquery
$(".myradio").click(function(){
$("#selectedRadioYes").val(1);
});
$("#botton").click(function(){
if($("#selectedRadioYes").val() === "1")
alert("you can go on");
else
alert("need select one radio");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.