Ajax Form Validation Implementation code

Compatible: Opera 9.6 + Chrome 2.0 + FF 3 + IE 6


effect: Verify
while entering one side

Image


Environment: Ruby 1.8.6 + rails 2.1.0 + Windows


Core code:


HTML:


browser disables JavaScript when displaying a message:


copy code code as follows:


<noscript>


<div style= "color:red" > your browser does not support JavaScript, some features cannot be used </div>


</noscript>


when the browser disables JS, the Submit button is not available to implement client-side validation!


copy code code as follows:


<div id= "Js_support" style= "Display:none" >


<p id= "Psubmit" ><input type= "Submit" Name= "Registerform" value= "registered" onclick= "return SubmitForm ();" /></p>


</div>


<script type= "Text/javascript" >


$ ("Js_support"). Style.display = "block";


</script>


Listening for form fields via JavaScript onfocus and onkeyup:


<input type= "text" class= textbox "onfocus=" Checklogin (this); "onkeyup=" checklogin (this); "style=" width : 120px; "/>


Ajax Automatic Verification: the use of a bp.js, is already encapsulated XMLHttpRequest object, can be downloaded to my project below


copy code code as follows:


function Checklogin (node) {


ClearError ();


if (BP. String.Trim (Node.value)!= "") {


var url = "/test/response_validate";


var params = [];


params["command"] = "Logincheck";


params["Login" = encodeURI (BP.  String.Trim (Node.value));


var v = validatepath ("Login", params["Login"));


if (v== "") {


BP. Io.xhrget ({


Url:url,


mimetype: "Text/json",


Params:params,


load:function (type, data, e) {


if (data==true) {


loginerror = document.getElementById ("Valstatus"). InnerHTML = ' login name already exists ';


document.getElementById ("Loginvalidate"). ClassName = "Icon_cross";


node.classname = "Input_error";


loginvalid = false;


} else {


loginerror = "";


document.getElementById ("Loginvalidate"). ClassName = "ICON_OK";


node.classname = "TextBox";


Loginvalid = true;


} 


}, 


error:function (type, data, e) {}


});


} else {


loginerror = document.getElementById ("Valstatus"). InnerHTML = V;


document.getElementById ("Loginvalidate"). ClassName = "Icon_cross";


node.classname = "Input_error";


Loginvalid = False


} 


} else {


loginerror = ValidatePath ("Login", "");


document.getElementById ("Loginvalidate"). ClassName = "";


node.classname = "TextBox";


} 


}


background:


This is the background of rails, through the render:p artial return data to the client, of course, can be any platform under, such as the Java platform can use the servlet out.println (...) Back to


copy code code as follows:


def response_validate


if Params[:login]


name = Params[:login]


puts name


if name = = "AAAAAA"


@value = True


render:p artial => ' Show_info '


Else


@value = False


render:p artial => ' Show_info '


End


End


End