Jump to content

Validation for form thingy

SuperWebman

By SuperWebman
in Javascript Help

 Share

Recommended Posts

SuperWebman Newbie

SuperWebman

Posted
Posted

Hey guys new to Javascript.  This is supposed to be a validation script so that people will have to fill out all fields before they submit the form.  When I upload this to server to my site.  it isn't working.  Any ideas?

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="file:///C|/Users/bschomp/Desktop/style.css" rel="stylesheet" type="text/css" media="screen" />
<title>Your Car Report | Kansas Vehicles | Nebraska Autos | Missouri Title Info | Iowa Car </title>



<style type="text/css">
body {
background-image: url(images/images/bluebg.jpg);
}
#header {
background-color: #CCC;
height: 500px;
width: 600px;
margin-top: 0px;
margin-right: 500px;
margin-bottom: 800px;
margin-left: 501px;
}
#LOGO {
height: 98px;
width: 232px;
margin-top: 200px;
margin-bottom: 0px;
margin-right: 0px;
float: left;
background-color: transparent;
}
#background {
background-color: transparent;
margin:
height: 900px;
width: 1400px;
}
#leftsidebar {
background-color: transparent;
height: 600px;
width: 1400px;
margin-top: 200px;
margin-right: 500px;
margin-bottom: 0px;
margin-left: 0px;
padding-left: 125px;
}
#leftfloat {
margin: 0px;
float: left;
height: 590px;
width: 300px;
}
#middlefloat {
float: left;
margin: 0px;
height: 500px;
width: 700px;
background-color: #fff;
}
#background {
}
#logo {
float: right;
height: 98px;
width: 232px;
padding-right: 20px;
}
#middle {
margin: auto;
height: 465px;
width: 650px;
margin-top: 20px;
background-color: #657489;
background-image: url(images/images/mediumbkgd.png);
}
#about {
background-color: transparent;
margin: 0px;
float: right;
height: 488px;
width: 250px;
padding-right: 20px;
padding-top: 50px;
}
#rightinfo {
margin: 0px;
float: left;
height: 360px;
width: 309px;
}
</style>
</head>

<body>
<div id="background">
  <div id="leftsidebar">     
    <div id="leftfloat">
      <div id="logo"><img src="images/images/logo.png" width="232" height="98" /></div>
      
<div id="about"><img src="images/images/sidebar.png" width="245" height="487" /></div>
</div>
    
    <div id="middlefloat">
      <div id="middle">
        <form id="form1" name="form1" method="post" action="contactforprocess.php">
          <p>
            <label for="f_name"><br />
              <br />
              <br />
              <br />
              <br />
       First Name </label>
            <input type="text" size="25" name="f_name" id="f_name" />
              
<label for="l_name">Last Name  </label>
            <input type="text" name="l_name" size="25"id="l_name" />
          </p>
          <p>
              </p>
          <p> <label for="Address">     Address  </label>
            <input type="text" name="add" size="45" id="add" />
            <label for="state">      State</label>
            <select name="state" id="state">
              <option>Choose State</option>
              <option>Iowa</option>
              <option>Kansas</option>
              <option>Missouri</option>
              <option>Nebraska</option>
              <option>Oklahoma</option>
            </select>
          </p>
          <p> </p>
          <p>
            <label for="phone">     Phone     </label>
            <input type="text" name="phone" id="phone" />
           	 <label for="email">                  Email</label>
           	 <input type="text" name="email" size="30" id="email" />
           	 <br />
            <br />
             <br />
              <br />
            <label for="vin">     VIN #     </label>
            <input type="text" size="45" name="vin" id="vin" />
          </p>
          <p>
                                                                                                                                                        <input type="submit" name="submit" id="submit" value="Submit" />
          </p>
        </form>
        
        <script  type="text/javascript">
var frmvalidator = new Validator("form1");
frmvalidator.addValidation("f_name","req","Please enter your First Name");
frmvalidator.addValidation("f_name","maxlen=20",
        "Max length for FirstName is 20");
frmvalidator.addValidation("l_name","req");
frmvalidator.addValidation("l_name","maxlen=20");
frmvalidator.addValidation("add","maxlen=45")
frmvalidator.addValidation("phone","maxlen=12");
frmvalidator.addValidation("phone","numeric");
frmvalidator.addValidation("email","maxlen=50");
frmvalidator.addValidation("email","req");
frmvalidator.addValidation("email","email");
frmvalidator.addValidation("vin","maxlen=17");
frmvalidator.addValidation("vin","req");


</script>

        <p> </p>
        
        
        
        </div>
     
    </div>
    
     <div id="rightinfo"><img src="images/images/sidebaright.png" width="309" height="360" /></div>
  </div>
  



</div>

</body>
</html>

 

 

Link to comment
Share on other sites
SuperWebman Newbie

SuperWebman

Posted
  • Author
Posted

ok i changed a few things but still doesn't seem to work if I leave some fields blank

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="file:///C|/Users/bschomp/Desktop/style.css" rel="stylesheet" type="text/css" media="screen" />
<title>Your Car Report | Kansas Vehicles | Nebraska Autos | Missouri Title Info | Iowa Car </title>



<style type="text/css">
body {
background-image: url(images/images/bluebg.jpg);
}
#header {
background-color: #CCC;
height: 500px;
width: 600px;
margin-top: 0px;
margin-right: 500px;
margin-bottom: 800px;
margin-left: 501px;
}
#LOGO {
height: 98px;
width: 232px;
margin-top: 200px;
margin-bottom: 0px;
margin-right: 0px;
float: left;
background-color: transparent;
}
#background {
background-color: transparent;
margin:
height: 900px;
width: 1400px;
}
#leftsidebar {
background-color: transparent;
height: 600px;
width: 1400px;
margin-top: 200px;
margin-right: 500px;
margin-bottom: 0px;
margin-left: 0px;
padding-left: 125px;
}
#leftfloat {
margin: 0px;
float: left;
height: 590px;
width: 300px;
}
#middlefloat {
float: left;
margin: 0px;
height: 500px;
width: 700px;
background-color: #fff;
}
#background {
}
#logo {
float: right;
height: 98px;
width: 232px;
padding-right: 20px;
}
#middle {
margin: auto;
height: 465px;
width: 650px;
margin-top: 20px;
background-color: #657489;
background-image: url(images/images/mediumbkgd.png);
}
#about {
background-color: transparent;
margin: 0px;
float: right;
height: 488px;
width: 250px;
padding-right: 20px;
padding-top: 50px;
}
#rightinfo {
margin: 0px;
float: left;
height: 360px;
width: 309px;
}
</style>

<script src="gen_validatorv4.js" type="text/javascript"></script>                <--------ADDED THIS LINE


</head>

<body>
<div id="background">
  <div id="leftsidebar">     
    <div id="leftfloat">
      <div id="logo"><img src="images/images/logo.png" width="232" height="98" /></div>
      
<div id="about"><img src="images/images/sidebar.png" width="245" height="487" /></div>
</div>
    
    <div id="middlefloat">
      <div id="middle">
        <form id="form1" name="form1" method="post" action="contactforprocess.php">
          <p>
            <label for="f_name"><br />
              <br />
              <br />
              <br />
              <br />
       First Name </label>
            <input type="text" size="25" name="f_name" id="f_name" />
              
<label for="l_name">Last Name  </label>
            <input type="text" name="l_name" size="25"id="l_name" />
          </p>
          <p>
              </p>
          <p> <label for="Address">     Address  </label>
            <input type="text" name="add" size="45" id="add" />
            <label for="state">      State</label>
            <select name="state" id="state">
              <option>Choose State</option>
              <option>Iowa</option>
              <option>Kansas</option>
              <option>Missouri</option>
              <option>Nebraska</option>
              <option>Oklahoma</option>
            </select>
          </p>
          <p> </p>
          <p>
            <label for="phone">     Phone     </label>
            <input type="text" name="phone" id="phone" />
           	 <label for="email">                  Email</label>
           	 <input type="text" name="email" size="30" id="email" />
           	 <br />
            <br />
             <br />
              <br />
            <label for="vin">     VIN #     </label>
            <input type="text" size="45" name="vin" id="vin" />
          </p>
          <p>
                                                                                                                                                        <input type="submit" name="submit" id="submit" value="Submit" />
          </p>
        </form>
        
        <script  type="text/javascript">
var frmvalidator = new Validator("form1");
frmvalidator.addValidation("f_name","req","Please enter your First Name");
frmvalidator.addValidation("f_name","maxlen=20",
        "Max length for FirstName is 20");
frmvalidator.addValidation("l_name","req");
frmvalidator.addValidation("l_name","maxlen=20");
frmvalidator.addValidation("add","maxlen=45")
frmvalidator.addValidation("phone","maxlen=12");
frmvalidator.addValidation("phone","numeric");
frmvalidator.addValidation("email","maxlen=50");
frmvalidator.addValidation("email","req");
frmvalidator.addValidation("email","email");
frmvalidator.addValidation("vin","maxlen=17");
frmvalidator.addValidation("vin","req");


</script>

        <p> </p>
        
        
        
        </div>
     
    </div>
    
     <div id="rightinfo"><img src="images/images/sidebaright.png" width="309" height="360" /></div>
  </div>
  



</div>

</body>
</html>

 

 

Link to comment
Share on other sites
Pikachu2000 Prolific Member

Pikachu2000

Posted
Posted

Do you realize that JS can't be considered validation? It should be viewed as nothing more than a convenience to the user when properly implemented, or a huge hassle when improperly implemented. You must validate the data in the server-side language after the form has been submitted.

Link to comment
Share on other sites
Pikachu2000 Prolific Member

Pikachu2000

Posted
Posted

Frankly, no, it won't. Moreover, if the form is used to insert into a database, you'll end up with either a compromised database, or one that ends up getting deleted by some script kiddie. If this sends an email, you're going to have every spammer in the world using it to send spam in no time flat. All a user has to do is disable JS, and they can submit any value they want to submit. That's why server-side validation is crucial.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.