Form validation still allows submission of empty fields

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • elsheh
    New Member
    • Nov 2006
    • 29

    Form validation still allows submission of empty fields

    Hi.. guys
    I’m trying to use JavaScript to validate my HTML for empty fields. My code is as below. The problem is that I can escape validation and submit empty fields.

    Any clue?

    Code:
     <html> 
    <head>
    <script language="JavaScript">
    function isEmpty(inputStr,fieldname){
    if (inputStr==null || inputStr==""){
    alert("please fill in the box")
    document.form1.fieldname.focus();
    document.form1.fieldname.select();
    return false;
    } else {
    return true;
    }
     
    }
    </script> </head>
    <body>
    <form name="form1" method="GET" action=”?????????”>
    <p> User ID:
    <input type="text" name="txt1" onBlur="isEmpty(txt1.value,txt1.name)"/> 
    <br />
    <p> User Name:
    <input type="text" name="txt2" onBlur="isEmpty(txt2.value,txt2.name)"/>
    <br /> <br />
    <input type="submit" VALUE="SUBMIT" />
    </form> </body> </html>
  • Akhilesh1505
    New Member
    • Feb 2007
    • 17

    #2
    Originally posted by elsheh
    Hi.. guys
    I’m trying to use JavaScript to validate my HTML for empty fields. My code is as below. The problem is that I can escape validation and submit empty fields.

    Any clue?

    <html>
    <head>
    <script language="JavaS cript">
    function isEmpty(inputSt r,fieldname){
    if (inputStr==null || inputStr==""){
    alert("please fill in the box")
    document.form1. fieldname.focus ();
    document.form1. fieldname.selec t();
    return false;
    } else {
    return true;
    }

    }
    </script> </head>
    <body>
    <form name="form1" method="GET" action=”??????? ??”>
    <p> User ID:
    <input type="text" name="txt1" onBlur="isEmpty (txt1.value,txt 1.name)"/>
    <br />
    <p> User Name:
    <input type="text" name="txt2" onBlur="isEmpty (txt2.value,txt 2.name)"/>
    <br /> <br />
    <input type="submit" VALUE="SUBMIT" />
    </form> </body> </html>
    You had given wrong
    path in action=”??????? ??”
    use like this action="".

    Akhilesh

    Comment

    • elsheh
      New Member
      • Nov 2006
      • 29

      #3
      Thanx
      The problem is not because of the action attribute, you may eliminate it. The issue is how to prevent of submission empty fields. (got it?)
      Cheers
      Originally posted by Akhilesh1505
      You had given wrong
      path in action=”??????? ??”
      use like this action="".

      Akhilesh

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        Instead of passing the name, pass the object itself, e.g. txt1. Then in your function, in place of
        Code:
        document.form1.fieldname.focus()
        you can have
        Code:
        fieldname.focus()
        because fieldname is the text box object.

        Comment

        • elsheh
          New Member
          • Nov 2006
          • 29

          #5
          thanx acoder

          but still doesn't work properly.I mean, i still able to submit empty fields.
          plz help

          Originally posted by acoder
          Instead of passing the name, pass the object itself, e.g. txt1. Then in your function, in place of
          Code:
          document.form1.fieldname.focus()
          you can have
          Code:
          fieldname.focus()
          because fieldname is the text box object.

          Comment

          • iam_clint
            Recognized Expert Top Contributor
            • Jul 2006
            • 1207

            #6
            [HTML]
            <html>
            <head>
            <script language="JavaS cript">
            function isEmpty(inputSt r,fieldname){
            if (inputStr==null || inputStr==""){
            alert("please fill in the box")
            document.form1. fieldname.focus ();
            document.form1. fieldname.selec t();
            return false;
            } else {
            return true;
            }
            }
            function validate() {
            //check for blank input boxes here
            //possibly alert("hey you didn't fill in everything"); and return false; if there is blank boxes (stops the submission);
            //else return true
            }
            </script> </head>
            <body>
            <form name="form1" method="GET" onsubmit="valid ate();" action=”??????? ??”>
            <p> User ID:
            <input type="text" name="txt1" onBlur="isEmpty (txt1.value,txt 1.name)"/>
            <br />
            <p> User Name:
            <input type="text" name="txt2" onBlur="isEmpty (txt2.value,txt 2.name)"/>
            <br /> <br />
            <input type="submit" VALUE="SUBMIT" />
            </form> </body> </html>
            [/HTML]

            Changed title of thread to more suit the question being asked

            Comment

            • Akhilesh1505
              New Member
              • Feb 2007
              • 17

              #7
              Originally posted by elsheh
              Hi.. guys
              I’m trying to use JavaScript to validate my HTML for empty fields. My code is as below. The problem is that I can escape validation and submit empty fields.

              Any clue?

              <html>
              <head>
              <script language="JavaS cript">
              function isEmpty(inputSt r,fieldname){
              if (inputStr==null || inputStr==""){
              alert("please fill in the box")
              document.form1. fieldname.focus ();
              document.form1. fieldname.selec t();
              return false;
              } else {
              return true;
              }

              }
              </script> </head>
              <body>
              <form name="form1" method="GET" action=”??????? ??”>
              <p> User ID:
              <input type="text" name="txt1" onBlur="isEmpty (txt1.value,txt 1.name)"/>
              <br />
              <p> User Name:
              <input type="text" name="txt2" onBlur="isEmpty (txt2.value,txt 2.name)"/>
              <br /> <br />
              <input type="submit" VALUE="SUBMIT" />
              </form> </body> </html>
              you are doing validation on onBlur event of textbox,
              If you want to validate on onSubmit event of form then
              you need to do like this.
              <form name="form1" method="GET" action=”??????? ??” onSubmit="valid ate()" >
              and then make a validate() function in javascript.

              Comment

              • Logician
                New Member
                • Feb 2007
                • 210

                #8
                Originally posted by Akhilesh1505
                you are doing validation on onBlur event of textbox,
                If you want to validate on onSubmit event of form then
                you need to do like this.
                <form name="form1" method="GET" action=”??????? ??” onSubmit="valid ate()" >
                and then make a validate() function in javascript.
                Code:
                <form name="form1" method="GET" action=”?????????” onSubmit="[B]return[/B]  validate()" >

                Comment

                • elsheh
                  New Member
                  • Nov 2006
                  • 29

                  #9
                  how about parameters?
                  cheers
                  Originally posted by Logician
                  Code:
                  <form name="form1" method="GET" action=”?????????” onSubmit="[B]return[/B]  validate()" >

                  Comment

                  • acoder
                    Recognized Expert MVP
                    • Nov 2006
                    • 16032

                    #10
                    See this link.

                    Comment

                    • elsheh
                      New Member
                      • Nov 2006
                      • 29

                      #11
                      thanx acoder
                      i still unable to solve this problem. could you help plz.
                      cheers
                      Originally posted by acoder

                      Comment

                      • ssh
                        New Member
                        • Mar 2007
                        • 6

                        #12
                        Originally posted by elsheh
                        Hi.. guys
                        I’m trying to use JavaScript to validate my HTML for empty fields. My code is as below. The problem is that I can escape validation and submit empty fields.

                        Any clue?

                        Code:
                         <html> 
                        <head>
                        <script language="JavaScript">
                        function isEmpty(inputStr,fieldname){
                        if (inputStr==null || inputStr==""){
                        alert("please fill in the box")
                        document.form1.fieldname.focus();
                        document.form1.fieldname.select();
                        return false;
                        } else {
                        return true;
                        }
                         
                        }
                        </script> </head>
                        <body>
                        <form name="form1" method="GET" action=”?????????”>
                        <p> User ID:
                        <input type="text" name="txt1" onBlur="isEmpty(txt1.value,txt1.name)"/> 
                        <br />
                        <p> User Name:
                        <input type="text" name="txt2" onBlur="isEmpty(txt2.value,txt2.name)"/>
                        <br /> <br />
                        <input type="submit" VALUE="SUBMIT" />
                        </form> </body> </html>
                        hi!
                        just try this one!!!!
                        nBlur="isEmpty( this,txt1.name) ";

                        function isEmpty(inputSt r,fieldname){
                        if (inputStr.value .length==0 || inputStr==""){
                        alert("please fill in the box")
                        }

                        Regards,
                        ssh

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032

                          #13
                          Originally posted by ssh
                          hi!
                          just try this one!!!!
                          nBlur="isEmpty( this,txt1.name) ";

                          function isEmpty(inputSt r,fieldname){
                          if (inputStr.value .length==0 || inputStr==""){
                          alert("please fill in the box")
                          }

                          Regards,
                          ssh
                          Whilst in principle this may work (though in this case it won't), it can be extremely annoying to have an alert onblur. Blurring can occur without user intervention, e.g. another program gains focus. An error message next to the field is much better. On the other hand, if it's an onsubmit or even onchange error check, then an alert should be fine.

                          Comment

                          • acoder
                            Recognized Expert MVP
                            • Nov 2006
                            • 16032

                            #14
                            Originally posted by elsheh
                            how about parameters?
                            cheers
                            In your validate() function, you don't need parameters. Just reference the text fields using their names. If you want to, you can pass the form reference as "this":
                            Code:
                            return validate(this);
                            Then in your validate function:
                            Code:
                            function validate(form) {
                             var txt1 = form.txt1;
                             if (txt1.value=="") {
                               alert ("Please fill in the box");
                               txt1.focus();
                               return false;
                             }
                             .... // txt2 and any other text boxes
                             return true;
                            }

                            Comment

                            Working...