www.webdeveloper.com
Results 1 to 4 of 4

Thread: What am I doing wrong here?

  1. #1
    Join Date
    Mar 2012
    Posts
    2

    What am I doing wrong here?

    I'm making an xhtml form that validates itself through a javascript function. I have the form up but for some reason I can't get it to validate. I'm not even sure if I linked things correctly. Here's what I have:

    the xhtml file

    <?xml version = ″1.0″ encoding = ″utf-8″ ?>
    <!DOCTYPE html PUBLIC ″-//W3C//DTD XHTML 1.0 Strict//EN″
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>


    <html xmlns = "http://www.w3.org/1999/xhtml">

    <head>
    <script src="gas24.js" type="text/javascript"></script>

    <h2> Registration Form </h2>

    <title>
    Javascript Form Validation Homework

    </title>

    </head>

    <body>

    <table border="">
    <form name="validation_form" method="post" onsubmit="return validate()">

    <tr>
    <td>
    <t>Name: <input type="text" name="YourName" size="10" maxlength="10"/>
    </td> </tr> </br>
    <tr>
    <td>
    E-mail Address: <input type="text" name="YourEmail" size="10" maxlength="24"/>
    </td> </tr> </br>
    <tr>
    <td>
    Password: <input type="password" name="YourPassword" size="10" maxlength="10"/>
    </td> </tr> </br>
    <tr>
    <td>
    Re-Type Password:
    <input type="password" name="passwordConfirmed" size="10" maxlength="10"/>
    </td> </tr> </br>
    <tr>
    <td>
    Your Gender: <input type="radio" name="MaleBox" Value="Male"> Male
    <input type="radio" name="FemaleBox" Value="Female"> Female
    </td> </tr> </br>
    <tr>
    <td>
    Comments:
    <input type="text" name="Comments" size="100" maxlength="500" value=""/>
    </td> </tr>
    <tr>
    <td>
    <input type="submit" value="Submit"/>
    </td> </tr>
    </form>



    </table>

    <p></p>



    </body>
    </html>


    The javascript file:
    I've tried two things. This:
    <SCRIPT LANGUAGE="JavaScript">

    function validation()
    {


    var x=document.forms["validation_form"]["YourName"].value;
    if (x==null || x=="")
    {
    alert("First name must be filled out");
    return false;
    }


    }


    And this:

    function validation()

    if ( document.validation_form.YourName.value == "" )
    {

    alert( "Please type your name.");
    valid = false;
    }



    if ( document.validation_form.YourPassword.value =!
    "document.validation_form.Confirm.value" )
    {
    alert ( "Please confirm your password." );
    valid = false;
    }


    I would greatly appreciate it if somebody could tell me what I'm doing wrong.

  2. #2
    Join Date
    Mar 2012
    Posts
    2
    Nobody can help? O=

  3. #3
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    317
    I don't know xhtml

    <form name="validation_form" method="post" onsubmit="return validate()" action="demo_form.asp">



    onsubmit="return validate()"

    function validation()



    function validation()
    must be
    function validate()


    Don't write <SCRIPT LANGUAGE="JavaScript"> in the javascript file




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    instead of

    <!DOCTYPE html PUBLIC ″-//W3C//DTD XHTML 1.0 Strict//EN″
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

    The code I tried:
    Code:
      
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
    <title> Javascript Form Validation Homework </title>
    <script type="text/javascript">
    // http://www.mustafaaydemir.org/xhtml-formlar.html
    
    // http://learnwebsitedesign.com/xhtml_tutorials/xhtml_tutorial.php
    // http://csshtmltutorial.com/csshtmltutorial-htmlformcodetutorial.php
    // http://www.elated.com/articles/form-validation-with-javascript/
    // http://www.w3schools.com/html/html_forms.asp
    // http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio
    // http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_radio
    
    // http://www.w3schools.com/js/js_form_validation.asp
    // http://www.w3schools.com/js/tryit.asp?filename=tryjs_form_validation
    // http://www.w3resource.com/javascript/form/example-javascript-form-validation.html
    // http://www.w3resource.com/javascript/form/javascript-sample-registration-form-validation.php
    // http://www.webdeveloper.com/forum/showthread.php?t=258487
    
    
    function validation() {
    
    var x=document.forms["validation_form"]["YourName"].value;
    if (x==null || x=="")
    {
    alert("Name must be filled out");
    return false;
    }
    
    var m=document.forms["validation_form"]["YourEmail"].value;
    if (m==null || m=="")
    {
    alert("E-mail Address must be filled out");
    return false;
    }
    
    
    var p=document.forms["validation_form"]["YourPassword"].value;
    if (p==null || p=="")
    {
    alert("Password must be filled out");
    return false;
    }
    
    var pc=document.forms["validation_form"]["passwordConfirmed"].value;
    if (pc==null || pc=="")
    {
    alert("Re-Type Password must be filled out");
    return false;
    }
    
    
    var r0=document.forms["validation_form"]["Gender"][0].checked;
    var r1=document.forms["validation_form"]["Gender"][1].checked;
    
    if (r0==false && r1 == false )
    {
    alert("Please choose your Gender: Male or Female");
    return false;
    }
    
    
    
    var c=document.forms["validation_form"]["Comments"].value;
    if (c==null || c=="")
    {
    alert("Comments must be filled out");
    return false;
    }
    return true;
    }
    
    </script>
    </head>
    <body>
    
    <form name="validation_form" onsubmit="return validation()" action="demo_form.asp" method="post" >
    <fieldset>
    <legend>Registration Form </legend>
    <p>Name: <input type="text" name="YourName" size="10" maxlength="10"/></p>
    <p>E-mail Address: <input type="text" name="YourEmail" size="10" maxlength="24"/></p>
    <p>Password: <input type="password" name="YourPassword" size="10" maxlength="10"/></p>
    <p>Re-Type Password:<input type="password" name="passwordConfirmed" size="10" maxlength="10"/></p>
    <p>Your Gender:
     <input type="radio" name="Gender" Value="Male"> Male
     <input type="radio" name="Gender" Value="Female"> Female
    </p>
    <p>Comments:<input type="text" name="Comments" size="100" maxlength="500" value=""/></p>
    <p><input type="submit" value="Submit"/></p>
    </fieldset>
    </form>
    
    </body>
    </html>
    other javascript forum:
    http://www.sitepoint.com/forums/foru...pt-amp-jQuery&
    Last edited by Ayşe; 03-23-2012 at 06:26 PM.

  4. #4
    Join Date
    Mar 2012
    Posts
    11
    Javascript can look through the page for the objects you specify by name or by id or some other means.

    If you have <input id="fullname" type="text"/> then you can access its value in javascript using document.getElementById("fullname").value

    Notice that the id of the input tag matches the id in the getElementById function. This is a more cross browser friendly way of getting the object.

    HTML Code:
    <script>
    function validate(){
       if(document.getElementById("fullname").value == ""){
           alert("Please enter your full name!");
           document.getElementById("form1").submit();
           return false;
       }
       return true;
    }
    </script>
    <body>
      <form action="url.asp" id="form1">
       <input type="text" id="fullname"/>
       <input type="submit" onclick="validate()"/>
      </form>
    </body>
    Make sure your submit button has an onclick to call the validate function.

    Don't know if that code works totally but it should give you the idea.
    Last edited by steve-o; 03-24-2012 at 01:30 AM.

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