JavaScript example #3

PHOTO EMBED

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 
    }

}
content_copyCOPY