Hyperjase Posted November 26, 2011 Share Posted November 26, 2011 I'm trying to incorporate a jquery validation script within a page I've already created, but I'm having real issues. The demo page provided works beautifully, but when I copy the code out I need, it doesn't work on mine! Here is the code I have that doesn't work: <?php session_start(); $step = isset($_GET['step']) ? (int)$_GET['step'] : '1'; $code = "</td></tr><tr><td colspan='6' id='footer'>"; $code2 = "</td></tr></table>"; $code3 = "</div></body></html>"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/template.css" type="text/css"/> <script src="js/jquery-1.6.min.js" type="text/javascript"> </script> <script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"> </script> <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"> </script> <script> jQuery(document).ready(function(){ // binds form submission and fields to the validation engine jQuery("#formID").validationEngine(); }); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-25642398-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); var loadingImage = 'images/loading.gif'; var closeButton = 'images/close.gif'; </script> <style type="text/css"> @import url("style.css"); </style> <link rel="StyleSheet" href="lightbox.css" type="text/css" /> </head> <body id="body"> <div id="gradient"> <table id="main"> <tr> <td colspan="6" id="header">#</td> </tr> <tr> <td height="52" colspan="6" align="center" valign="top"><div id="nav"> <?php include("nav.php"); ?> </div></td> </tr> <tr> <td colspan="6" valign="top" id="content">Xbox 360 Registration</td> </tr> <tr> <td valign="top" id="content-register"> <?php switch ($step) { case "1": default: ?> <table width="75%" align="center"> <tr> <td colspan="2" valign="top"> <form action="?step=2" method="post" id="formID"> Please select your console type<br /> </td> </tr> <tr> <td align="center" valign="top" width="50%"><label>Xbox 360 Original (Beige or Black)<br /> <img src="images/xbox360orig.gif" width="250" height="250"><br /> <input class="validate[required] radio" type="radio" name="console" value="Xbox 360 Original" /> </label> </td> <td align="center" valign="top" width="50%"><label>Xbox 360 Slim<br /> <img src="images/xbox360slim.gif" width="250" height="250"><br /> <input class="validate[required] radio" type="radio" name="console" value="Xbox 360 Slim" /> </label> </td> </tr> <tr> <td colspan="2"><input type="submit" value="Next >>" /> </form> </td> </tr> </table> <?php echo $code; include("footer.php"); echo $code2; include("compat.php"); echo $code3; exit; Here is the demo page code for radio buttons: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>JQuery Validation Engine</title> <link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/> <link rel="stylesheet" href="../css/template.css" type="text/css"/> <script src="../js/jquery-1.6.min.js" type="text/javascript"> </script> <script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"> </script> <script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"> </script> <script> jQuery(document).ready(function(){ // binds form submission and fields to the validation engine jQuery("#formID").validationEngine(); }); </script> </head> <body> <p> <a href="#" onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))">Evaluate form</a> | <a href="#" onclick="jQuery('#formID').validationEngine('showPrompt', 'This is an example', 'pass')">Build a prompt on a div</a> | <a href="#" onclick="jQuery('#formID').validationEngine('hide')">Close all prompts</a> | <a href="../index.html" onclick="">Back to index</a> </p> <p> This demonstration shows extended features around checkboxes </p> <form id="formID" class="formular" method="post" action=""> <fieldset> <legend> Phone </legend> <div> <span>Radio Groupe : <br/> </span> <span>radio 1: </span> <input class="validate[required] radio" type="radio" name="group0" id="radio1" value="5"/><span>radio 2: </span> <input class="validate[required] radio" type="radio" name="group0" id="radio2" value="3"/><span>radio 3: </span> <input class="validate[required] radio" type="radio" name="group0" id="radio3" value="9"/> </div> <div> <span>Minimum 2 checkbox : <br/> </span> <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="group1" id="maxcheck1" value="5"/> <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="group1" id="maxcheck2" value="3"/> <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="group1" id="maxcheck3" value="9"/> </div> <div> <span><b>Maximum</b> 2 checkbox : <br/> </span> <input class="validate[maxCheckbox[2]] checkbox" type="checkbox" name="group2" id="maxcheck4" value="5"/> <input class="validate[maxCheckbox[2]] checkbox" type="checkbox" name="group2" id="maxcheck5" value="3"/> <input class="validate[maxCheckbox[2]] checkbox" type="checkbox" name="group2" id="maxcheck6" value="9"/> </div> </fieldset> <fieldset> <legend> Conditions </legend> <div class="infos"> Checking this box indicates that you accept terms of use. If you do not accept these terms, do not use this website : </div> <label> <span class="checkbox">I accept terms of use : </span> <input class="validate[required] checkbox" type="checkbox" id="agree" name="agree"/> </label> </fieldset><input class="submit" type="submit" value="Validate & Send the form!"/><hr/> </form> </body> </html> There isn't much code left that I don't see that I could have missed, but this page works! I've made sure all the script and css links to the correct file in my header, everything goes to where it's supposed to. What am I missing? Thanks! Jason Quote Link to comment https://forums.phpfreaks.com/topic/251823-jquery-input-validation-script-not-working/ Share on other sites More sharing options...
teynon Posted November 26, 2011 Share Posted November 26, 2011 You haven't given unique id's to each radio button and you haven't applied the class "submit" to the submit button. I'd say its quite possible the ID's is whats making it not work, as I'm pretty sure jQuery references it by ID. Quote Link to comment https://forums.phpfreaks.com/topic/251823-jquery-input-validation-script-not-working/#findComment-1291307 Share on other sites More sharing options...
Hyperjase Posted November 26, 2011 Author Share Posted November 26, 2011 Thanks for the reply, I've added id="radio1" to each of the radio inputs, changing one of them to number 2, and added class="submit" to the submit button, still nothing though. Any other ideas what it could be? Maybe how the form is created? It's done differently on the jquery input validation to how I've done it. Thanks again! Quote Link to comment https://forums.phpfreaks.com/topic/251823-jquery-input-validation-script-not-working/#findComment-1291408 Share on other sites More sharing options...
Hyperjase Posted November 28, 2011 Author Share Posted November 28, 2011 I've managed to get it working, I think I needed to use name="group0" along with the ID. Only issue is now, it will only validate one if the radio buttons, if I click the other one it still requires me to select the first required radio button. I've also tried it with checkbox & make it so only one can be selected but that doesn't work either! Any suggestions or ideas? I've pulled the code from the second php code I posted, as reference. Thanks Quote Link to comment https://forums.phpfreaks.com/topic/251823-jquery-input-validation-script-not-working/#findComment-1291837 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.