JavaScript example #3
Fri Dec 18 2020 05:54:28 GMT+0000 (Coordinated Universal Time)
Saved by @Javkhlantugs ##javascript
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="ValidateForm.js"></script> <link type="text/css" href="formstyle.css" rel="stylesheet"/> </head> <body> <form onsubmit="return validateAll(this)" action="#" method="post"> <label id="lblName" for="txtName">Name</label><input id="txtName" type="text" class="valid" onblur="return validateNonEmpty(this, txtName_Help)"/><span id="txtName_Help"></span><br /> <label id="lblAddress" for="txtAddress">Address</label><input id="txtAddress" type="text" class="valid" onblur="return validateNonEmpty(this, txtAddress_Help)"/><span id="txtAddress_Help"></span><br /> <label id="lblPCode" for="txtPCode">Postcode</label><input id="txtPCode" type="text" class="valid" onblur="return validatePCode(this, txtPCode_Help)"/><span id="txtPCode_Help"></span><br /> <label id="lblPhone" for="txtPhone">Phone</label><input id="txtPhone" type="text" class="valid" onblur="return validateNonEmpty(this, txtPhone_Help)" /><span id="txtPhone_Help"></span><br /> <input name="Submit1" type="submit" value="submit" /><input name="Reset1" type="reset" value="reset"/></form> </body> </html> label{ display:inline-block; width:100px; } input.valid { background: #dddddd; } input.invalid { background: #faa; } function validateNonEmpty(tf, helpText) { var value = tf.value; if (value) { tf.className = "valid"; helpText.innerHTML = " "; return true; //valid - not empty } else { tf.className = "invalid"; helpText.innerHTML = "Empty input"; //error msg return false; //invalud = empty } } function validateAll(form) { var success = true; for (var i = 0; i < form.elements.length; i++) { var e = form.elements[i]; if (e.onblur) //if onblur event attribute is not emoty { //trigger the valdation success = e.onblur() && success; } } return success; } function validatePCode(tf, helpText) { //check if the value is empty var isNotEmpty = validateNonEmpty(tf, helpText); if (isNotEmpty == false) { return false; } //check if the value contains 4 digits var value = tf.value; //var regex = /^\d{4}&/; // var regex = new RegExp("ABC"); //CONTAINTS ABC // var regex = /^ABC$/; //exactly ABC //var regex = /A[ABC]C/; //CONTAINS EITHER AAC, ABC OR ACC // var regex = /^A[ABC]/; //STARTS WITH A FOLLOWED BY EITHER A,B OR C //var regex = /[ABC]A$/; //SECOND LAST CHAR IS EITHER A,B OR C & LAST CHAR IS A // var regex = /A[A-C]C/; //CONTAINS EITHER AAC, ABC, ACC // var regex = /^A.C$/; //3 chars that starts with a, followed by any char ends with c // var regex = /CA{3}T/; //CONTAINS CAAAT var regex = /CA{2,}T/; //CONTAINTS c, followed by var regex = /CA{2, 5}T/; // var is4Digits = regex.test(value); if (is4Digits) { tf.className = "valid"; helpText.innerHTML = " "; return true; //valid - 4 digits } else { tf.className = "invalid"; helpText.innerHTML = "Invalid postcode"; //error msg return false; //invalud = empty } }
Comments