www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to validate form input fields?

  1. #1
    Join Date
    Nov 2002
    Posts
    5

    Question How to validate form input fields?

    Hi,

    I have form and it's name is test, onSubmit will return a validate().

    I can validate whether the user inputs string or number of a field.

    But, how can I check whether it is:

    1. Blank

    2. the length of the number, e.g. 4 digits, no less nor more.

    3. only char can be input, no number is allowed

    4. double - 1 digit + 2 decimal places, e.g. 8.52

    How should I do it?

    Thanks

  2. #2
    Join Date
    Nov 2002
    Posts
    5
    May I ask you how about Number ONLY, no char?

    Thanks a lot.

  3. #3
    Join Date
    Nov 2002
    Posts
    5
    miss = "";
    var a = document.getElementById("ID").value;
    var b = document.Form.name;
    var c = document.Form.price;

    if (/^\d{8}$/.test(a.value)) {
    miss += "\n - ID";
    }

    if (/^\[a-z]$/i.test(b.value))
    {
    miss += "\n - name";
    }

    if (/^\d\.\d{1}$/.test(c.value))
    {
    miss += "\n - price";
    }

    The code does not work.

    Why le?

    I can input anything and submit to the jsp form.

  4. #4
    Join Date
    Nov 2002
    Posts
    5
    Sorry, it does not work on IE 5.5.

    var miss = "";
    var a = document.getElementById("ID").value;
    var b = document.form.name.value;
    var c = document.form.price.value;

    if (/^\d{8}$/.test(a)) {
    miss += "\n - ID";
    }

    if (/^\[a-z]$/i.test(b)) //b with .value, no need here
    {
    miss += "\n - name";
    }

    if (/^\d\.\d{1}$/.test(c))
    {
    miss += "\n - price";
    }

  5. #5
    Join Date
    Nov 2002
    Location
    UK
    Posts
    41
    This may seem like alot of code but it does more than you ask. It checks for real numbers, integers and date inputs. Have a play and see what you think!!



    <html>
    <head>
    <form name="MyForm" onSubmit="return validateForm()">
    <Script Language="JavaScript">

    function validateForm()
    {

    ok = true;



    if(ok == true)
    {
    ok = ValText(document.MyForm.PrintedID_OnameText.value,"D","12/12/2002","12/12/2001","12/12/2000","11/12/2000","F","HIGH MESSAGE","LOW MESSAGE","DateD")
    }


    if(ok == true)
    {
    ok = ValText(document.MyForm.print_textthree.value,"R","4","3","2.5","-1.5","F","High 3","Low 3","Real NumberR")
    }


    if(ok == true)
    {
    ok = ValText(document.MyForm.printID_Integer.value,"I","1005","1000","995","990","F","tooooo high integer","too low integer","Integer I")
    }


    if (ok == true)
    {
    ok = writeCookie()
    }


    return ok;
    }


    function ValTextArea(OName,NoEntry,PrintID)
    {
    if((NoEntry == "F")&&(OName == ""))
    {
    alert("There is no data in the field: " + PrintID);
    return(false);
    }
    else{return (true);}

    }

    function ValText(OName,FType,HiHi,Hi,Lo,LoLo,NoEntry,HiMsg,LoMsg,PrintID)
    {
    //checks to see if no data has been added - requires the onChange script in the HTML section to remove leading white space otherwise if you hit the space bar then it thinks there is data
    if((NoEntry == "F")&&(OName == ""))
    {alert("There is no data in the field: " + PrintID);
    return(false);}

    //checks to see if an whole number has been added - whole numbers only
    if((FType== "I")&&(parseInt(OName))!=OName)
    {alert("NOTE: An Integer (whole number) was not entered in the field: " + PrintID);
    return(false);}

    if((FType== "I")&&(parseInt(OName)) >= (parseInt(HiHi)))
    {alert("WARNING: Data ABOVE the expected limit in the field: " + PrintID);
    return(false);}

    else if((FType== "I")&&(parseInt(OName)) <= (parseInt(LoLo)))
    {alert("WARNING: Data BELOW the expected limit in the field: " + PrintID);
    return(false);}

    else if(((FType== "I")&&(parseInt(OName)) < (parseInt(HiHi))&&(parseInt(OName)) >= (parseInt(Hi))))
    {
    if(confirm(HiMsg + ".\n\nCheck the field: " + PrintID + ".\n\nClick OK to accept or Cancel to alter your entry"))
    {return(true);}
    else
    {return(false);}
    }

    else if(((FType== "I")&&(parseInt(OName)) > (parseInt(LoLo))&&(parseInt(OName)) <= (parseInt(Lo))))
    {
    if(confirm(LoMsg + ".\n\nCheck the field: " + PrintID + ".\n\nClick OK to accept or Cancel to alter your entry"))
    {return(true);}
    else
    {return(false);}
    }

    //real numbers only
    if((FType== "R")&&(parseFloat(OName))!=OName)
    {alert("NOTE: A Real Number was not entered in the field: " + PrintID);
    return(false);}

    if((FType== "R")&&(parseFloat(OName)) >= (parseFloat(HiHi)))
    {alert("WARNING: Data ABOVE the expected limit in the field: " + PrintID);
    return(false);}

    else if((FType== "R")&&(parseFloat(OName)) <= (parseFloat(LoLo)))
    {alert("WARNING: Data BELOW the expected limit in the field: " + PrintID);
    return(false);}

    else if(((FType== "R")&&(parseFloat(OName)) < (parseFloat(HiHi))&&(parseFloat(OName)) >= (parseFloat(Hi))))
    {
    if(confirm(HiMsg + ".\n\nCheck the field: " + PrintID + ".\n\nClick OK to accept or Cancel to alter your entry"))
    {return(true);}
    else
    {return(false);}
    }

    else if(((FType== "R")&&(parseFloat(OName)) > (parseFloat(LoLo))&&(parseFloat(OName)) <= (parseFloat(Lo))))
    {
    if(confirm(LoMsg + ".\n\nCheck the field: " + PrintID + ".\n\nClick OK to accept or Cancel to alter your entry"))
    {return(true);}
    else
    {return(false);}
    }

    if(FType=="D")
    {
    //code to format and validate date inputs - also compares various date values
    var DaysInMonth = new Array(12)
    var MonthName = new Array(12)
    DaysInMonth[1]=31; MonthName[1]="January";
    DaysInMonth[2]=29; MonthName[2]="February";
    DaysInMonth[3]=31; MonthName[3]="March";
    DaysInMonth[4]=30; MonthName[4]="April";
    DaysInMonth[5]=31; MonthName[5]="May";
    DaysInMonth[6]=30; MonthName[6]="June";
    DaysInMonth[7]=31; MonthName[7]="July";
    DaysInMonth[8]=31; MonthName[8]="August";
    DaysInMonth[9]=30; MonthName[9]="September";
    DaysInMonth[10]=31; MonthName[10]="October";
    DaysInMonth[11]=30; MonthName[11]="November";
    DaysInMonth[12]=31; MonthName[12]="December";

    var ValidDate = /^\d{2}\/\d{2}\/\d{4}$/
    var Result = OName.match(ValidDate);

    if (!Result)
    {alert("NOTE: The date you have entered is not in the required format of: dd/mm/yyyy");
    return(false);}

    var Day = OName.substr(0,2)-0;
    var Month = OName.substr(3,2)-0;
    var Year = OName.substr(6,4)-0;

    if((Month<1)||(Month>12))
    {alert("Note: The month you have entered is not a valid month. (1-12 only)");
    return(false);}

    var MonthDayNumber = DaysInMonth[Month];
    var MonthTitle = MonthName[Month];
    if((Day<1)||(Day > MonthDayNumber))
    {alert("NOTE: The day you entered for the month of " + MonthTitle + " is invalid.\n\nPlease check and re-enter");
    return(false);}

    if((Day==29)&&(Month==2)&&((Year%4)==0))
    {
    if(Year % 400==0)
    {return(true);}
    else if(Year % 100==0)
    {alert("NOTE: The day you entered for the month of " + MonthTitle + " is invalid.\n\nPlease check and re-enter");
    return(false);}
    }

    if((Day==29)&&(Month==2)&&((Year%4)!=0))
    {alert("NOTE: The day you entered for the month of " + MonthTitle + " is invalid.\n\nPlease check and re-enter");
    return(false);}

    if((FType== "D")&&(Date.parse(OName)) >= (Date.parse(HiHi)))
    {
    alert("WARNING: Data ABOVE the expected limit in the field: " + PrintID);
    return(false);}

    else if((FType== "D")&&(Date.parse(OName)) <= (Date.parse(LoLo)))
    {alert("WARNING: Data BELOW the expected limit in the field: " + PrintID);
    return(false);}

    else if(((FType== "D")&&(Date.parse(OName)) < (Date.parse(HiHi))&&(Date.parse(OName)) >= (Date.parse(Hi))))
    {
    if(confirm(HiMsg + ".\n\nCheck the field: " + PrintID + ".\n\nClick OK to accept or Cancel to alter your entry"))
    {return(true);}
    else
    {return(false);}
    }

    else if(((FType== "D")&&(Date.parse(OName)) < (Date.parse(HiHi))&&(Date.parse(OName)) >= (Date.parse(Hi))))
    {
    if(confirm(LoMsg + ".\n\nCheck the field: " + PrintID + ".\n\nClick OK to accept or Cancel to alter your entry"))
    {return(true);}
    else
    {return(false);}
    }


    else{return (true);}

    }

    else{return(true);}

    }


    </script>

    <!-- the onChange function here removes any leading white space -->
    <center>
    DATE<input type="text" size="10" maxlength="10" name="PrintedID_OnameText" onChange = "javascript:while(''+this.value.charAt(0)==' ')this.value=this.value.substring(1,this.value.length);"">

    REAL NUMBER<input type="text" size="10" name="print_textthree" onChange = "javascript:while(''+this.value.charAt(0)==' ')this.value=this.value.substring(1,this.value.length);"">

    INTEGERS<input type="text" size="10" name="printID_Integer" onChange = "javascript:while(''+this.value.charAt(0)==' ')this.value=this.value.substring(1,this.value.length);"">

    </center>
    </body>
    <input type ="SUBMIT" name="submit" value="Submit" >
    </form>
    </html>

  6. #6
    Join Date
    Nov 2002
    Posts
    5
    var miss = "";
    var a = document.getElementById("ID").value;
    var b = document.form.name.value;
    var c = document.form.price.value;

    if ((a=="")&&(a!=4)) { //not null, must be 4 digits
    miss += "\n - ID";
    }

    if ((b=="")&&(isNaN(b))) //not null, must be string
    {
    miss += "\n - name";
    }

    if ((c=="")&&((c>=1.0)&&(c<=7.7))) //not null, must be in the range of 1.0 and 7.7
    {
    miss += "\n - price";
    }

    It did not work also.

    How should I fix it?

    Tricky, did you reply the wrong thread?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles