php - real time validation of username and email address using ajax post -
php - real time validation of username and email address using ajax post -
i set simple form , utilize ajax+jquery check valid username (doesn't exist in db) , email address (valid format , doesn't exist in db) follows
<body> <div> <h5> sign </h5> <hr /> <div> username:<input type="text" size="32" name="membername" id="username"><div id="usernamestatus"></div><br /> email:<input type="text" size="32" name="memberemail" id="memberemail"><div id="emailstatus"></div><br/> password:<input type="password" size="32" name="memberpwd"><br /> <button id="signup" disabled="true">sign up</button> </div> <script> function isemailvalidandnew() { var pattern = new regexp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.| [\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i); var success=false; $("#memberemail").change(function() { var email=$("#memberemail").val(); success=patter.test(email); if(success) { $("#usernamestatus").html('<img align="absmiddle" src="loading.gif"/> checking email...'); $.ajax( { type: "post", url:"regcheckemail.php", data:"memberemail="+email, success: function(msg) { $("#emailstatus").ajaxcomplete(function(event, request, settings) { if(msg=="ok") { $("#memberemail").removeclass("object_error"); $("#memberemail").addclass("object_ok"); $(this).html('<img align="absmiddle" src="checkmark.png"/>'); success=true; } else { $("#memberemail").removeclass('object_ok'); $("#memberemail").addclass("object_error"); $(this).html(msg); success=false; } } ); } } ); } else { $("#emailstatus").html("provided email address ill-formed"); $("#memberemail").removeclass('object_ok'); // if necessary $("#memberemail").addclass("object_error"); success=false; } } ); homecoming success; } function isuseralreadyexist() { var success=false; $("#username").change(function() { var usr=$("#username").val(); if(usr.length>=7) { $("#usernamestatus").html('<img align="absmiddle" src="loading.gif"/> checking availability...'); $.ajax( { type: "post", url:"regcheckuser.php", data:"username="+usr, success: function(msg) { $("#usernamestatus").ajaxcomplete(function(event, request, settings) { if(msg=="ok") { $("#username").removeclass("object_error"); $("#username").addclass("object_ok"); $(this).html('<img align="absmiddle" src="checkmark.png"/>'); success=true; } else { $("#username").removeclass('object_ok'); $("#username").addclass("object_error"); $(this).html(msg); success=false; } } ); } } ); } else { $("#usernamestatus").html("the username should have @ to the lowest degree 7 characters"); $("#username").removeclass('object_ok'); $("#username").addclass("object_error"); success=false; } }); homecoming success; } $(document).ready(function() { if(isemailvalidandnew() && isuseralreadyexist()) { $('button').find("#signup").attr("disabled","false"); } else { $('button').find("#signup").attr("disabled","true"); } }); </script> </div> </body> i utilize notepad code it, doesn't work , can't find out mistake. don't know tool might using code in javascript has awesome options embedded intellisense , debug capability.
there several problems code.
your email regex not thorough plenty (ok, isn't stopping code working, it's first thing noticed). your ajax calls asynchronous, good, means functions$.ajax() calls finish before ajax response received. need restructure ajax success callback. you don't need ajaxcomplete() function - you're within ajax success handler @ point set code within current ajaxcomplete() straight in containing success function. you phone call isemailvalidandnew() , isuseralreadyexist() 1 time document ready , disable or enable "signup" control, @ no point after re-enable or re-disable it. calling these functions if validate fields, set alter handlers on fields code in functions won't until fields changed user. following 1 way construction code instead:
$(document).ready(function() { var emailok = false, nameok = false; function setsubmitenabling() { $("#signup").prop("disabled", !(emailok && nameok)); } setsubmitenabling(); $("#username").change(function() { var usr = $(this).val(); if (usr.length < 7) { $("#usernamestatus").html("the username should have @ to the lowest degree 7 characters"); $(this).removeclass('object_ok').addclass("object_error"); nameok = false; setsubmitenabling(); } else { // format seems ok, ajax call: $("#usernamestatus").html('<img align="absmiddle" src="loading.gif"/> checking availability...'); $.ajax({ type: "post", url:"regcheckuser.php", data:"username="+usr, success : function(msg) { if(msg === "ok") { $("#username").removeclass("object_error") .addclass("object_ok"); $("#usernamestatus").html('<img align="absmiddle" src="checkmark.png"/>'); nameok = true; } else { $("#username").removeclass('object_ok') .addclass("object_error"); $("#usernamestatus").html(msg); nameok = false; } // update button state setsubmitenabling(); } }); } }); $("#memberemail").change(function() { // same thing username field shown above, // except setting emailok instead of nameok, suggest // username part working first come same way }); }); the thought of above code there several points need enable or disable "signup" button, , depends on 2 unrelated conditions. create flag each of conditions, , function setsubmitenabling() checks flags , enables or disables buttons. phone call function when page loads set initial enable/disable state, , phone call 1 time again time changes needs enable/disable state re-evaluated.
also, create alter handler each of 2 fields. alter handlers similar each other, doing initial quick validation see if length , format ok , if ajax phone call test uniqueness.
php jquery html ajax
Comments
Post a Comment