SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Need assistance with Validating a form * Required Text Fields, Numeric only, blank...

    Hi, i do not wish to moan, but i am trying to learn Javascript. I want to create a form that has several restrictions in it, i am somewhat lost in the process and after reading text book after text book as well as searching online tutorials and guides, i have reached a dead end.

    I am comfortable with enabling 1 restriction in the form, but if i attempt to build on it with multiple restrictions in the code, they cancel each other out.


    Here is the code in question

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script language="Javascript" languge="text/javascript">


    function form1_onsubmit()
    {
    var returnValue = false;

    // Here is the code for the form actions. I have been unable to add the restrictions to it.

    // I would like the text name value to be set as "not blank" - so that the text field can't be skipped or left blank.

    if (document.form1.txtName.Value == "")
    {
    alert("Please enter your name");
    document.form1.txtName.focus();
    }
    // I have tried to get this code so that it only accepts numbers.
    else if (document.form1.txtCode.value == "")
    {
    alert("Please enter your Post Code);
    document.form1.txtCode.focus();
    }
    // This is another field i have attempted to make so that it can't be submitted without data entered.
    else if (document.form1.txtaSuggestion.value == "")
    {
    alert("Please enter your suggestion");
    document.form1.txtaSuggestion.focus();
    }
    else

    {
    returnValue = true;
    }
    return returnValue;
    }

    </script>
    </head>
    <title></title>
    </head>
    <body>
    <form action ="RecieveComplexForm.asp"
    method=post
    name=form1
    onsubmit="return form1_onsubmit{}">
    <p>Name : <input name=txtName></p>
    <p>Post Code : <input name=txtCode></p>
    Gender : <br />
    Female <input type="radio" checked name="radGender" Value="Female">
    Male <input type="radio" Name="radGender" Value="Male">
    <br /> <br />
    Your Age Range
    <select name="selAgeRange" size="1">
    <Option Value=0_18 Selected>Under 18 </option>
    <Option Value=19_40> 19 - 40 </option>
    <Option Value=41_70> 41 - 70 </option>
    <Option Value=70+>70+</option>
    </select>
    <br /><br />
    Tick if you want a response
    <input name="chkResponse" Type="checkbox" Value="SendResponse">
    <br /><br />
    Your Suggestion <br />
    <textarea cols=20 rows=10 name=txtaSuggestion wrap=hard></textarea>
    <br /><br />
    <p>
    <Input name=submit1 Type=submit Value="Send Suggestion">
    </p>
    </form>
    </body>
    </html>
    I am poor in regards to commenting the code, i know i am supposed to say what it does. But it is a bit hard when it doesn't do it + i am not even sure if this code is accurate.


    Thanks in advance.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way you're accessing your form elements might cause you trouble.

    For a true cross-browser way of accessing page elements use one of the following functions:
    Code JavaScript:
    document.getElementById("some_id")
    document.getElementsByName("some_name")
    document.getElementsByTagName("tag_name")

    If you add an ID to the form objects you need to access your code could look like this:
    Code JavaScript:
    function form1_onsubmit()
    {
    var returnValue = false;
     
    // create [URL="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Regular_Expressions"]regular expression[/URL] to test if a string only contains numbers and is not empty
    var reg_numbers = new RegExp("^[0-9]+$", "i");
     
    if (document.getElementById("txtName").value.length == 0)
    {
       alert("Please enter your name");
       document.getElementById("txtName").focus();
    }
    else if (reg_numbers.test(document.getElementById("txtCode").value) == false)
    {
       alert("Please enter your Post Code");
       document.getElementById("txtCode").focus();
    }
    else if (document.getElementById("txtaSuggestion").value.length == 0)
    {
       alert("Please enter your suggestion");
       document.getElementById("txtaSuggestion").focus();
    }
    else
       returnValue = true;
     
    return returnValue;
    }

    If you don't want to irritate your visitors I would not use alert boxes to indicate errors. You could place span elements with IDs next to your input fields. Then if an error occurs you could do:
    Code JavaScript:
    if (document.getElementById("txtName").value.length == 0)
    {
       document.getElementById("txtName_error").value = "<- Please enter your name";
       document.getElementById("txtName").focus();
    }

    Last but not least make sure you always do the same check on the server side because people can always disable Javascript.

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for those tips, i will play around with those ideas and see what i come up with.

    I've got text books all over the place. I've tried multiple things... i even tried combining elements from all the textbooks (no wonder why the later versions didn't work hehe).


Bookmarks

Posting Permissions

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