Full version: jsB@nk » Form » Validation » Form Set Validation
URL: https://www.javascriptbank.com/form-set-validation.html
One of the most popular form validation tasks is to check that important fields within a form have been filled out by the user. This is a generic script that will do just that, by verifying that mandatory fields are filled in before form submission.
Full version: jsB@nk » Form » Validation » Form Set Validation
URL: https://www.javascriptbank.com/form-set-validation.html
<style type="text/css"> .fld { width:285px; text-align:center; } div#errors { color:red; font-weight:bold; } </style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">// author: Kelly Johnson// steelersfan47@gmail.com//Name: From Set Validator var required = new Array(); var form_nm = "myForm"; window.onload = function() { var elems = document.forms[form_nm].elements; for(var i=0,a;a=elems[i];i++) { if(a.getAttribute('set') == "required") { required[required.length] = i; a.onkeyup = function() { return isOk(this.form); } } } return isOk(document.forms[form_nm]); } function isOk(frm) { var error = new Array(); for(var i=0,a;i<required.length;i++) { a=required[i]; if(!eval(frm.elements[a].getAttribute('regexp')).test(frm.elements[a].value)) { error[error.length] = "Field "+ frm.elements[a].getAttribute('id') +" are not correctly filled in."; } } frm.elements[frm.elements.length-1].disabled = error.length; document.getElementById('errors').innerHTML = "Good to Go!"; if(error.length) { document.getElementById('errors').innerHTML = error.join('<BR>'); } } </script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--> <form name="myForm" action="someScript.pl" method="post"> <fieldset class="fld"><legend>Fields: </legend><!-- Validates with at least 1 digit, only digits -->Numbers: <input type="text" id="numbers" set="required" name="txt1" regexp="/^\d+$/" size="20"><br><!-- Optional -->Text2: <input type="text" id="txt2" set="optional" name="txt2" size="20"><br><!-- Optional -->Text3: <input type="text" id="txt3" set="optional" name="txt3" size="20"><br><!-- Validates with 5 letters, or more, no non-letters -->Letters: <input type="text" id="letters" set="required" name="txt4" regexp="/^[A-Za-z]{5,}$/" size="20"><br><button type="submit" name="sbmt" id="sbmt" disabled="disabled">Submit!</button></fieldset> </form> <fieldset class="fld" style="height: 100px;"><legend>Errors</legend><div id="errors">Field numbers are not correctly filled in.<br>Field letters are not correctly filled in.</div></fieldset><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->