| Recommend this page to a friend! |
| PHP Forms Class with HTML Generator and JavaScript Validation | > | All threads | > | ValidateAsSet + IE 11 | > | (Un) Subscribe thread alerts |
| |||||||||||||
The javascript and inputs included in the page below were generated using the latest version of this class, but I am having issues with js on IE11. On submit the javascript alerts that questions must be answered, even though they are.
Can you please take a look? Thank you ------------------------------------------- <!DOCTYPE html> <html> <head> <title>Test ValidateAsSet</title> </head> <body> <form method="post" action="" name="eligibility_questions" onsubmit="return ValidateForm(this)"> <script type="text/javascript" defer="defer"> <!-- function ValidationError(form, Invalid, error_message, focus) { alert(error_message) if(form[focus].focus) form[focus].focus() } function ValidateForm(theform) { var e r=theform['1_yes'] s=';' if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['1_no'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['2_yes'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['2_no'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['3_yes'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['3_no'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['4_yes'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['4_no'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['5_yes'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['5_no'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['6_yes'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) r=theform['6_no'] if(r.currentStyle) r.style.cssText=s else r.setAttribute('style', s) if(theform['1_yes'].checked==false && theform['1_no'].checked==false) { r=theform['1_yes'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 1' ValidationError(theform, {'1_yes': e }, e, '1_yes') return false } if(theform['1_yes'].checked==false && theform['1_no'].checked==false) { r=theform['1_no'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 1' ValidationError(theform, {'1_no': e }, e, '1_no') return false } if(theform['2_yes'].checked==false && theform['2_no'].checked==false) { r=theform['2_yes'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 2' ValidationError(theform, {'2_yes': e }, e, '2_yes') return false } if(theform['2_yes'].checked==false && theform['2_no'].checked==false) { r=theform['2_no'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 2' ValidationError(theform, {'2_no': e }, e, '2_no') return false } if(theform['3_yes'].checked==false && theform['3_no'].checked==false) { r=theform['3_yes'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 3' ValidationError(theform, {'3_yes': e }, e, '3_yes') return false } if(theform['3_yes'].checked==false && theform['3_no'].checked==false) { r=theform['3_no'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 3' ValidationError(theform, {'3_no': e }, e, '3_no') return false } if(theform['4_yes'].checked==false && theform['4_no'].checked==false) { r=theform['4_yes'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 4' ValidationError(theform, {'4_yes': e }, e, '4_yes') return false } if(theform['4_yes'].checked==false && theform['4_no'].checked==false) { r=theform['4_no'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 4' ValidationError(theform, {'4_no': e }, e, '4_no') return false } if(theform['5_yes'].checked==false && theform['5_no'].checked==false) { r=theform['5_yes'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 5' ValidationError(theform, {'5_yes': e }, e, '5_yes') return false } if(theform['5_yes'].checked==false && theform['5_no'].checked==false) { r=theform['5_no'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 5' ValidationError(theform, {'5_no': e }, e, '5_no') return false } if(theform['6_yes'].checked==false && theform['6_no'].checked==false) { r=theform['6_yes'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 6' ValidationError(theform, {'6_yes': e }, e, '6_yes') return false } if(theform['6_yes'].checked==false && theform['6_no'].checked==false) { r=theform['6_no'] s='background-color: #ffbb61;' if(r.currentStyle) r.style.cssText=s else r.setAttribute("style", s) e='Please answer question 6' ValidationError(theform, {'6_no': e }, e, '6_no') return false } return true } // --> </script> <noscript> <div style="display: none"><!-- dummy comment for user agents without Javascript support enabled --></div> </noscript> <h4>Please answer the questions below.</h4> <div> <div> <p><span>Q1:</span>Please answer this question?</p> <div> <p id="q1_yes"><input type="radio" name="q1" value="1" id="1_yes"/> Yes</p> <p id="q1_no"><input type="radio" name="q1" value="0" id="1_no"/> No</p> </div> </div> <div> <p><span>Q2:</span>Please answer this question?</p> <div> <p id="q2_yes"><input type="radio" name="q2" value="1" id="2_yes"/> Yes</p> <p id="q2_no"><input type="radio" name="q2" value="0" id="2_no"/> No</p> </div> </div> <div> <p><span>Q3:</span> Please answer this question?</p> <div> <p id="q3_yes"><input type="radio" name="q3" value="1" id="3_yes"/> Yes</p> <p id="q3_no"><input type="radio" name="q3" value="0" id="3_no"/> No</p> </div> </div> <div> <p><span>Q4:</span>Please answer this question?</p> <div> <p id="q4_yes"><input type="radio" name="q4" value="1" id="4_yes"/> Yes</p> <p id="q4_no"><input type="radio" name="q4" value="0" id="4_no"/> No</p> </div> </div> <div> <p><span>Q5:</span>Please answer this question?</p> <div> <p id="q5_yes"><input type="radio" name="q5" value="1" id="5_yes"/> Yes</p> <p id="q5_no"><input type="radio" name="q5" value="0" id="5_no"/> No</p> </div> </div> <div> <p><span>Q6:</span>Please answer this question?</p> <div> <p id="q6_yes"><input type="radio" name="q6" value="1" id="6_yes"/> Yes</p> <p id="q6_no"><input type="radio" name="q6" value="0" id="6_no"/> No</p> </div> </div> </div> <div> <a style="cursor:pointer;"><input type="submit" name="next" value="Next Step" id="next_step" tabindex="100" style="font-size: 14px;cursor:pointer;" /></a> </div> </form> </body> </html> -------------------------------------------
I have no issues on other browsers or OS's.
I also tried setting ValidateAsSet on just one the yes inputs, rather than both the yes and no, and still have same result.
Apparently this caused by the fact that you are using IDs that start by numbers.
I am not sure why this causes IE 11 to work differently. It may be a bug in IE 11. Anyway, if you change the ID of the inputs so it starts with a letter, it will work as expected.
Thank you very much Manuel! I was banging my head for hours trying to figure this out.
Have a great weekend! |
info at phpclasses dot org.
