javascript - Validate Radio Button Groups Without jQuery Validate -
i trying validate form on each slide before sliding next set of questions.
all seems ok except radio buttons. trying add class of 'error-focus' group of buttons if button not checked , if answer checked nothing apart return $error = false;
here form http://www.foresightaus.com.au/form/
$nextbtn.click(function(e){ e.preventdefault(); var newindex = 0, currentslide = $slide.eq(currentindex), $text = currentslide.find($('li input[type="text"]')), $email = currentslide.find($('#youremail')), $radio = currentslide.find($('li.radio-btns')), formfields = currentslide.find("input:text, li.radio-btns"), $error = true; formfields.removeclass("error-focus"); //----------------------------------------------------------------- //-- validate text fields $text.each(function(){ if($(this).val()==""){ //errormessage("please enter name"); $(this).focus().addclass("error-focus"); $error = true; }else{ $error = false; } }); // end text each //----------------------------------------------------------------- //-- validate email fields if($email.val()==""){ //errormessage("please enter email address"); $(this).focus().addclass("error-focus"); $error = true; }else if(!isvalidemail($email.val())){ //errormessage("please enter correct email address"); $(this).focus().addclass("error-focus"); $error = true; }else{ $error = false; } //----------------------------------------------------------------- //-- validate radio fields $radio.each(function(){ if (!$(this).find(':checked')) { $(this).addclass("error-focus"); $error = true; } else { $error = false; } }); // end radio each //----------------------------------------------------------------- if($error = false){ if(currentindex<lastindex){ newindex = currentindex+1; } slidetoimage(newindex); } }); function isvalidemail(email) { var emailrx = /^[\w\.-]+@[\w\.-]+\.\w+$/; return emailrx.test(email); }
you should add div around each radio group, , if 1 of radio buttons isn't checked, should give div red border you're giving other fields. example:
html
<form> <div id="group-1-wrapper"> <input type="radio"> <input type="radio"> </div> </form>
js:
if(error) // handling $("#group-1-wrapper").addclass("error-focus");
Comments
Post a Comment