validation of input text field in html using javascript

Question

lt script type  text javascript  gt     function required           var empt   document forms  form1    Name   value       if  empt                          alert  Please input a Value              return false                 lt  script gt     lt form name  form1  method    action    gt   lt input type  text  name  name  value  Name   gt  lt br   gt   lt input type  text  name  address line1  value  Address Line 1   gt  lt br   gt    I have more than one input text field  each having their default value  Before I submit the form I have to verify whether all fields are filled  So far i got the javascript to check for null since different text boxes have different default value  How can I write a javascript to verify that user has entered data  I mean  the script must identify that input data is other than default and null

User · Accepted Answer

If you are not using jQuery then I would simply write a validation method that you can be fired when the form is submitted. The method can validate the text fields to make sure that they are not empty or the default value. The method will return a bool value and if it is false you can fire off your alert and assign classes to highlight the fields that did not pass 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 validate and then in this case calls the isNotEmpty method to validate if the field is empty or has not been changed from the default value. it continuously calls the inNotEmpty method until it returns a value of true or if the conditional fails for that field it will return false.

Give this a shot and let me know if it helps or if you have any questions. of course you can write additional custom methods to validate numbers only, email address, valid URL, etc.

If you use jQuery at all I would look into trying out the jQuery Validation plug-in. I have been using it for my last few projects and it is pretty nice. Check it out if you get a chance. http://docs.jquery.com/Plugins/Validation

User · Answer

lt pre gt  lt form name  myform  action  saveNew  method  post  enctype  multipart form-data  gt       lt input type  text    id  name    name  name    gt    lt input type  submit   gt   lt  form gt  lt  pre gt    lt script language  JavaScript  type  text javascript  gt   var frmvalidator    new Validator  myform        frmvalidator EnableFocusOnError false        frmvalidator EnableMsgsTogether         frmvalidator addValidation  name   req   Plese Enter Name       lt  script gt      before using above code you have to add the gen validatorv31 js js file

User · Answer

lt form name  myForm  id  myForm  method  post  onsubmit  return validateForm     gt      First Name   lt input type  text  id  name    gt   lt br   gt       lt span id  nameErrMsg  class  error  gt  lt  span gt   lt br   gt       lt  --     all your other stuff     -- gt   lt  form gt     lt p gt      1 word should be atleast 5 letter lt br gt      2 No space should be encountered lt br gt      3 No numbers and special characters allowed lt br gt      4 letters can be repeated upto 3 eg  aa is allowed aaa is not allowed     lt  p gt     lt button id  validateTestButton  value  Validate now  onclick  validateForm     gt Validate now lt  button gt    validateForm   function          return checkName       function checkName         var x   document myForm      var input   x name value      var errMsgHolder   document getElementById  nameErrMsg        if  input length  lt  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

User · Answer

function hasValue  val        Return true if text input is valid  not-empty     return val replace   s        length     boolean     For multiple elements you can pass inside your input elements loop their value into that function argument   If a user inserted one or more spaces  thanks to the regex s  the function will return false

User · Answer

lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt       lt head gt           lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1  gt           lt title gt Validation lt  title gt           lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt           lt script type  text javascript  gt              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 lt 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   lt span style  color red   class  span  tagid    gt Please Enter   lbl   lt  span gt                                       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 lt compareValidator length j                                 if  tagval         amp  amp   tagclass indexOf compareValidator j      -1                                    if        compareValidator j   first   val              compareValidator j   last   val                                                compareValidator j    last   after   lt span style  color red   class  span  tagid    gt Invalid Text lt  span gt                                            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         amp  amp   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   lt span style  color red   class  span  tagid    gt Email is Invalid lt  span gt                                           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   amp  amp   radiotags 1  checked    false                                    span  tagid  remove                                        tagid   after   lt span style  color red   class  span  tagid    gt Please Select Your Gender  lt  span gt                                     gender last   next   after   lt span style  color red   class  span  tagid    gt  Please Select Your Gender lt  span gt                                       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 lt formtag length j                         formtag j  onsubmit   function                            return Validate                                                            for var i 0 i lt 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    amp  amp   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  gt  31  amp  amp   KeyBoardCode  lt  48    KeyBoardCode  gt  57                        event preventDefault                            spannum   remove                              numeric   after   lt span class  spannum  gt Numeric Keys Please lt  span gt                               numeric   focus                        return false                                            spannum   remove                        return true                            if  document addEventListener                  document addEventListener  DOMContentLoaded   onloadevents  false                               window onload   onloadevents           lt  script gt       lt  head gt       lt body gt           lt form method  post  gt               lt label for  fname  gt Test 1    lt  label gt  lt input type  text  title  Test 1  id  fname  class  form1  gt  lt br gt               lt label for  fname1  gt Test 2    lt  label gt  lt input type  text  title  Test 2  id  fname1  class  form1 compare  gt  lt br gt               lt label for  fname2  gt Test 3    lt  label gt  lt input type  text  title  Test 3  id  fname2  class  form1 compare  gt  lt br gt               lt label for  gender  gt Gender    lt  label gt               lt input type  radio  title  Male  id  fname3  class  gender  name  gender  value  Male  gt  lt label for  gender  gt Male lt  label gt               lt input type  radio  title  Female  id  fname4  class  gender  name  gender  value  Female  gt  lt label for  gender  gt Female lt  label gt  lt br gt               lt label for  fname5  gt Mobile    lt  label gt  lt input type  text  title  Mobile  id  fname5  class  numeric  gt  lt br gt               lt label for  fname6  gt Email    lt  label gt  lt input type  text  title  Email  id  fname6  class  email  gt  lt br gt               lt input type  submit  id  sub  value  Submit  gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

For flexibility and other places you might want to validated  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 on your html section use the following event    lt input type  text  id  names  onkeyup  validateOnlyTextField this     gt   You can always reuse the function

[javascript] validation of input text field in html using javascript

Examples related to javascript

Examples related to html

Examples related to validation

Examples related to form-submit