Recommend this page to a friend! |
PHP Forms Class with HTML Generator and JavaScript Validation | > | All threads | > | ValidateAsSet + IE 11 | > | (Un) Subscribe thread alerts |
|
James - 2016-02-25 18:36:52
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> -------------------------------------------
James - 2016-02-25 18:58:58 - In reply to message 1 from James
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.
Manuel Lemos - 2016-02-26 02:44:58 - In reply to message 2 from James
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.
James - 2016-02-26 14:34:42 - In reply to message 3 from Manuel Lemos
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
.