All geek questions in one place

Validating input text field in html using javascript

<script type='text/javascript'> function required() { var empt = document.forms["form1"]["Name"].value; if (empt == "") { alert("Please input a Value"); return false; } } </script> <form name="form1" method="" action=""> <input type="text" name="name" value="Name"/><br /> <input type="text" name="address line1" value="Address Line 1"/><br />

I have several input fields, each of which has its own default value. Before I submit the form, I have to check if all the fields are filled. So far, I got javascript to check for zero, since different text fields have a different default value. How can I write javascript to verify that the user has entered data? I mean, the script should determine that the input is different from the default and null values.

+4
source share
6 answers

If you are not using jQuery, I will just write a validation method that you can fire when submitting the form. The method can check text fields to make sure they are not empty or the default value. The method will return bool, and if it is false, you can turn off your warning and assign classes to highlight fields that have not passed validation.

HTML:

 <form name="form1" method="" action="" onsubmit="return validateForm(this)"> <input type="text" name="name" value="Name"/><br /> <input type="text" name="addressLine01" value="Address Line 1"/><br /> <input type="submit"/> </form>

JavaScript:

 function validateForm(form) { var nameField = form.name; var addressLine01 = form.addressLine01; if (isNotEmpty(nameField)) { if(isNotEmpty(addressLine01)) { return true; { { return false; } function isNotEmpty(field) { var fieldData = field.value; if (fieldData.length == 0 || fieldData == "" || fieldData == fieldData) { field.className = "FieldError"; //Classs to highlight error alert("Please correct the errors in order to continue."); return false; } else { field.className = "FieldOk"; //Resets field back to default return true; //Submits form } }

The validateForm method assigns the elements you want to check, and then in this case calls the isNotEmpty method to check whether the field is empty or has not been changed from the default value. it continuously calls the inNotEmpty method until it returns true or if the condition is not met for this field, it will return false.

Give this snapshot and let me know if this helps or if you have any questions. Of course, you can write additional custom methods to check only the number, email address, valid URL, etc.

If you use jQuery at all, I would try checking out the jQuery Validation plugin. I use it for my last few projects, and that is pretty good. Check it out if you have a chance. http://docs.jquery.com/Plugins/Validation

+3
source 
 <form name="myForm" id="myForm" method="post" onsubmit="return validateForm();"> First Name: <input type="text" id="name" /> <br /> <span id="nameErrMsg" class="error"></span> <br /> <!-- ... all your other stuff ... --> </form> <p> 1.word should be atleast 5 letter<br> 2.No space should be encountered<br> 3.No numbers and special characters allowed<br> 4.letters can be repeated upto 3(eg: aa is allowed aaa is not allowed) </p> <button id="validateTestButton" value="Validate now" onclick="validateForm();">Validate now</button> validateForm = function () { return checkName(); } function checkName() { var x = document.myForm; var input = x.name.value; var errMsgHolder = document.getElementById('nameErrMsg'); if (input.length < 5) { errMsgHolder.innerHTML = 'Please enter a name with at least 5 letters'; return false; } else if (!(/^\S{3,}$/.test(input))) { errMsgHolder.innerHTML = 'Name cannot contain whitespace'; return false; }else if(!(/^[a-zA-Z]+$/.test(input))) { errMsgHolder.innerHTML= 'Only alphabets allowed' } else if(!(/^(?:(\w)(?!\1\1))+$/.test(input))) { errMsgHolder.innerHTML= 'per 3 alphabets allowed' } else { errMsgHolder.innerHTML = ''; return undefined; } } .error { color: #E00000; }
+1
source 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Validation</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var tags = document.getElementsByTagName("input"); var radiotags = document.getElementsByName("gender"); var compareValidator = ['compare']; var formtag = document.getElementsByTagName("form"); function validation(){ for(var i=0;i<tags.length;i++){ var tagid = tags[i].id; var tagval = tags[i].value; var tagtit = tags[i].title; var tagclass = tags[i].className; //Validation for Textbox Start if(tags[i].type == "text"){ if(tagval == "" || tagval == null){ var lbl = $(tags[i]).prev().text(); lbl = lbl.replace(/ : /g,'') //alert("Please Enter "+lbl); $(".span"+tagid).remove(); $("#"+tagid).after("<span style='color:red;' class='span"+tagid+"'>Please Enter "+lbl+"</span>"); $("#"+tagid).focus(); //return false; } else if(tagval != "" || tagval != null){ $(".span"+tagid).remove(); } //Validation for compare text in two text boxes Start //put two tags with same class name and put class name in compareValidator. for(var j=0;j<compareValidator.length;j++){ if((tagval != "") && (tagclass.indexOf(compareValidator[j]) != -1)){ if(($('.'+compareValidator[j]).first().val()) != ($('.'+compareValidator[j]).last().val())){ $("."+compareValidator[j]+":last").after("<span style='color:red;' class='span"+tagid+"'>Invalid Text</span>"); $("span").prev("span").remove(); $("."+compareValidator[j]+":last").focus(); //return false; } } } //Validation for compare text in two text boxes End //Validation for Email Start if((tagval != "") && (tagclass.indexOf('email') != -1)){ //enter class = email where you want to use email validator var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ if (reg.test(tagval)){ $(".span"+tagid).remove(); return true; } else{ $(".span"+tagid).remove(); $("#"+tagid).after("<span style='color:red;' class='span"+tagid+"'>Email is Invalid</span>"); $("#"+tagid).focus(); return false; } } //Validation for Email End } //Validation for Textbox End //Validation for Radio Start else if(tags[i].type == "radio"){ //enter class = gender where you want to use gender validator if((radiotags[0].checked == false) && (radiotags[1].checked == false)){ $(".span"+tagid).remove(); //$("#"+tagid").after("<span style='color:red;' class='span"+tagid+"'>Please Select Your Gender </span>"); $(".gender:last").next().after("<span style='color:red;' class='span"+tagid+"'> Please Select Your Gender</span>"); $("#"+tagid).focus(); i += 1; } else{ $(".span"+tagid).remove(); } } //Validation for Radio End else{ } } //return false; } function Validate(){ if(!validation()){ return false; } return true; } function onloadevents(){ tags[tags.length -1].onclick = function(){ //return Validate(); } for(var j=0;j<formtag.length;j++){ formtag[j].onsubmit = function(){ return Validate(); } } for(var i=0;i<tags.length;i++){ var tagid = tags[i].id; var tagval = tags[i].value; var tagtit = tags[i].title; var tagclass = tags[i].className; if((tags[i].type == "text") && (tagclass.indexOf('numeric') != -1)){ //enter class = numeric where you want to use numeric validator document.getElementById(tagid).onkeypress = function(){ numeric(event); } } } } function numeric(event){ var KeyBoardCode = (event.which) ? event.which : event.keyCode; if (KeyBoardCode > 31 && (KeyBoardCode < 48 || KeyBoardCode > 57)){ event.preventDefault(); $(".spannum").remove(); //$(".numeric").after("<span class='spannum'>Numeric Keys Please</span>"); //$(".numeric").focus(); return false; } $(".spannum").remove(); return true; } if (document.addEventListener) { document.addEventListener("DOMContentLoaded", onloadevents, false); } //window.onload = onloadevents; </script> </head> <body> <form method="post"> <label for="fname">Test 1 : </label><input type="text" title="Test 1" id="fname" class="form1"><br> <label for="fname1">Test 2 : </label><input type="text" title="Test 2" id="fname1" class="form1 compare"><br> <label for="fname2">Test 3 : </label><input type="text" title="Test 3" id="fname2" class="form1 compare"><br> <label for="gender">Gender : </label> <input type="radio" title="Male" id="fname3" class="gender" name="gender" value="Male"><label for="gender">Male</label> <input type="radio" title="Female" id="fname4" class="gender" name="gender" value="Female"><label for="gender">Female</label><br> <label for="fname5">Mobile : </label><input type="text" title="Mobile" id="fname5" class="numeric"><br> <label for="fname6">Email : </label><input type="text" title="Email" id="fname6" class="email"><br> <input type="submit" id="sub" value="Submit"> </form> </body> </html>
0
source 
 function hasValue( val ) { // Return true if text input is valid/ not-empty return val.replace(/\s+/, '').length; // boolean }

For a few elements that you can pass inside your input elements, write their value to this function argument.

If the user has inserted one or more spaces, thanks to the regular expression s+ function will return false.

0
source 
 <pre><form name="myform" action="saveNew" method="post" enctype="multipart/form-data"> <input type="text" id="name" name="name" /> <input type="submit"/> </form></pre> <script language="JavaScript" type="text/javascript"> var frmvalidator = new Validator("myform"); frmvalidator.EnableFocusOnError(false); frmvalidator.EnableMsgsTogether(); frmvalidator.addValidation("name","req","Plese Enter Name"); </script> before using above code you have to add the gen_validatorv31.js js file
0
source

For flexibility and other places you can check. You can use the following function.

 'function validateOnlyTextField(element) { var str = element.value; if(!(/^[a-zA-Z, ]+$/.test(str))){ // console.log('String contain number characters'); str = str.substr(0, str.length -1); element.value = str; } }'

Then in the html section use the following event.

<input type="text" id="names" onkeyup="validateOnlyTextField(this)" />

You can always reuse the function.

0
source

Source: https://habr.com/ru/post/1434584/

More articles:


All Articles