1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Form Validation help

Discussion in 'HTML & Website Design' started by muchochiz, Nov 14, 2014.

0
  1. #1
    Hi guys
    I would really appreciate if someone could help me implement / create a form validation on a form which I have created . I really wouldn't want to put up my form page in a public forum so please guys reply so I can send you the html page of the form.
    Thanks in advance
     
    muchochiz, Nov 14, 2014 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    This is the discussion part of the forum so you really need to give us something to work with.

    I'd recommend combining client side validation (javascript) and server side validation (php, asp, etc).

    There are some really good javascript validation scripts out there - they can be really helpful for newbies as they have all the email validation built in and you don't have to start from scratch.
     
    sarahk, Nov 14, 2014 IP
  3. muchochiz

    muchochiz Active Member

    Messages:
    148
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    Thanks for your reply, Here is the HTML code for the form and the javascript form validation, I am using Jquery validation 1.13.1 here http://jqueryvalidation.org/

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>contact us</title>
<link rel="shortcut icon" href="images/favicon.png" type="image/png"/>
<link href="style/global.css" rel="stylesheet" type="text/css" />
<link href="style/default/layout.css" rel="stylesheet" type="text/css" />
<link href="style/default/home.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/screen.css">
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script language="javascript" type="text/javascript" src="js/gcws.js"></script>
<script language="javascript" type="text/javascript" src="js/flashobject.js"></script>
<script language="javascript" type="text/javascript" src="js/default/home.js"></script>
<script language="javascript" type="text/javascript" src="js/customTracking.js"></script>
<script>
    $.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        }
    });

    $().ready(function() {
        // validate the comment form when it is submitted
        $("#commentForm").validate();

        // validate signup form on keyup and submit
        $("#signupForm").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                topic: {
                    required: "#newsletter:checked",
                    minlength: 2
                },
                agree: "required"
            },
            messages: {
                firstname: "Please enter your firstname",
                lastname: "Please enter your lastname",
                username: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
                },
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },
                confirm_password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long",
                    equalTo: "Please enter the same password as above"
                },
                email: "Please enter a valid email address",
                agree: "Please accept our policy"
            }
        });

        // propose username by combining first- and lastname
        $("#username").focus(function() {
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            if (firstname && lastname && !this.value) {
                this.value = firstname + "." + lastname;
            }
        });

        //code to hide topic selection, disable for demo
        var newsletter = $("#newsletter");
        // newsletter topics are optional, hide at first
        var inital = newsletter.is(":checked");
        var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
        var topicInputs = topics.find("input").attr("disabled", !inital);
        // show when newsletter is checked
        newsletter.click(function() {
            topics[this.checked ? "removeClass" : "addClass"]("gray");
            topicInputs.attr("disabled", !this.checked);
        });
    });
    </script>
<style type="text/css">
div#container
{
    width: 800px;
    height: 1200px;
    margin-top: 0px;
    margin-left: 0px;
    text-align: left;
}
</style>
<style type="text/css">
body
{ 
   background-color: #FFFFFF;
   color: #000000;
  
}
</style>
<style type="text/css">
a:active
{
   color: #0000FF;
}
a:hover
{
   color: #E49282;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
   img { behavior: url("pngfix.htc"); }
</style>
<![endif]-->
</head>
<body>
<div id="container">
<form class="cmxform" id="commentForm" method="get" action="">
  <div id="bv_" style="margin:0; padding:0; position:absolute; left:493px; top:97px; width:969px; height:853px; text-align:left; z-index:1;">
  <img src="images/bg2_01.jpg" alt="" width="817" border="0" align="top" id="" style="width:969px;height:853px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:493px; top:950px; width:969px; height:256px; text-align:left; z-index:2;">
<img src="images/bv01003_01_01_01.png" id="" alt="" align="top" border="0" style="width:969px;height:245px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1196px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
  <h4><b>HOME</b></h4></div>

<div id="bv_" style="margin:0; padding:0; position:absolute; left:1247px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1299px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
  <h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1352px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1407px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:494px; top:97px; width:197px; height:853px; text-align:left; z-index:10;">
  <img src="images/leftbar.jpg" id="" alt="" align="top" border="0" style="width:197px;height:853px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:501px; top:116px; width:132px; height:130px; text-align:left; z-index:32;">
<h1>Quick links</h1>
<h3>About us</li>
<li style="list-style-type: none;">Careers</li>
<li style="list-style-type: none;">Mission Statement</li>
</h3></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:708px; top:113px; width:695px; height:827px; text-align:left; z-index:13;">
  <h1><b>Contact Us</b></h1><br>
  <h3><br>
<p>
<b>General Enquiry</b>: <br>
<b>Help</b>
:<br>
<b>Request quote</b>
: <br>
</h3>
<input type="text" id="firstname" style="position:absolute; left:10px; top:258px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:2" name="firstname" value="">
<div id="bv_Text2" style="margin:0; padding:0; position:absolute; left:10px; top:238px; width:71px; height:16px; text-align:left; z-index:3;">
<font style="font-size:13px" color="#000000" face="Arial">First Name</font></div>
<input type="text" id="Editbox2" style="position:absolute; left:10px; top:311px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:4" name="Lastname" value="">
<div id="bv_Text3" style="margin:0; padding:0; position:absolute; left:10px; top:287px; width:71px; height:16px; text-align:left; z-index:5;">
<font style="font-size:13px" color="#000000" face="Arial">Last Name</font></div>
<div id="bv_Text4" style="margin:0; padding:0; position:absolute; left:10px; top:342px; width:71px; height:16px; text-align:left; z-index:6;">
<font style="font-size:13px" color="#000000" face="Arial">Email</font></div>
<input type="text" id="Editbox3" style="position:absolute; left:10px; top:362px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:7" name="Email" value="">
<div id="bv_Text5" style="margin:0; padding:0; position:absolute; left:10px; top:397px; width:158px; height:16px; text-align:left; z-index:8;">
<font style="font-size:13px" color="#000000" face="Arial">Telephone number</font></div>
<input type="text" id="Editbox4" style="position:absolute; left:10px; top:419px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:9" name="Telephone" value="">
<div id="bv_Text6" style="margin:0; padding:0; position:absolute; left:10px; top:452px; width:254px; height:16px; text-align:left; z-index:10;">
<font style="font-size:13px" color="#000000" face="Arial">What is your question or topic regarding?*</font></div>
<div style="position:absolute; left:10px; top:475px; width:270px; height:24px; border:1px #C0C0C0 solid; z-index:11">
<select name="Combobox1" size="1" id="Combobox1" style="width:100%; height:100%; border-width:0px; font-family:'Calibri'; font-size:10px;">
<select id="topic" name="topic" title="Please select a topic" required>
                        <option></option>
                        <option>topic1</option>
                        <option>topic2</option>
                        <option>topic3</option>
</select>
</div>
<textarea name="TextArea1" id="TextArea1" style="position:absolute; left:10px; top:530px; width:271px; height:148px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:12" rows="6" cols="29"></textarea>
<div id="bv_Text7" style="margin:0; padding:0; position:absolute; left:10px; top:505px; width:254px; height:16px; text-align:left; z-index:13;">
<font style="font-size:13px" color="#000000" face="Arial">Please tell us what's on your mind:*</font></div>
<input type="submit" id="submit" name="Button1" value="Submit" style="position:absolute; left:208px; top:700px; width:75px; height:24px; font-family:Arial; font-size:13px; z-index:14">
</form>
</div>
<hr noshade="noshade" id="Line1" style="color:#666666; background-color:#333333; border:0px; margin:0; padding:0; position:absolute; left:495px; top:995px; width:966px; height:1px; z-index:39">
<div id="bv_" style="margin:0; padding:0; position:absolute; left:501px; top:1000px; width:142px; height:130px; text-align:left; z-index:32;">
<h3><font color="#666666"><b>Company Information</b>
<li style="list-style-type: none;">footer links</li></a>
<li style="list-style-type: none;">footer links</li>
<li style="list-style-type: none;">footer links</li></a>
</font></h3></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:648px; top:1000px; width:142px; height:130px; text-align:left; z-index:32;">
<h3><font color="#666666"><b>footer links</b>
<li style="list-style-type: none;">footer links</li>
<li style="list-style-type: none;">footer links</li>
<li style="list-style-type: none;">footer links</li>
</font></h3></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:795px; top:1000px; width:142px; height:130px; text-align:left; z-index:32;">
<h3><font color="#666666"><b>Support</b>
<li style="list-style-type: none;">Contact us</li>
<li style="list-style-type: none;">F.A.Q</li>
<li style="list-style-type: none;">Site Navigation</li>
</font></h3></div>
<hr noshade="noshade" id="Line2" style="color:#666666; background-color:#333333; border:0px; margin:0; padding:0; position:absolute; left:495px; top:1164px; width:966px; height:1px; z-index:39">
<div id="bv_Text1" style="margin:0; padding:0; position:absolute; left:1172px; top:1165px; width:285px; height:15px; text-align:left; z-index:37;">
<h3><font color="#666666">Home|Site Map|Terms of Use|Security and Privacy</font></h3></div>
</body>
</html>
    HTML:
     
    muchochiz, Nov 15, 2014 IP
  4. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #4
    That codes a disaster man, you should redo the entire website. Sorry.
     
    KewL, Nov 15, 2014 IP
  5. muchochiz

    muchochiz Active Member

    Messages:
    148
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    @KewL thanks for replying , I know its a disaster lol , Its just a rough sketch of the actual form . All I want to accomplish now is the form validation , I would be really grateful if someone could get the form validation script to work . Thanks
     
    muchochiz, Nov 15, 2014 IP
  6. Tony Toreto

    Tony Toreto Member

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #6
    here is the example of basic form validation..
    <html >
<head>
<title>Untitled Document</title>

</head>
<script>
function confirmpass(){
var pass1=document.form1.pass.value;
var pass2=document.form1.mpass.value;

if(pass1==pass2)
{
document.getElementById("mn").innerHTML="valid password";}
else
{
document.getElementById("mn").innerHTML="invalid password";}
}
</script>
<body>



<form name="form1" method="post">

<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td align="right">First Name</td>
<td><input type="text" name="Firstname" required pattern="[A-Za-z]{1,10}" title="plz write only letter." autofocus/></td>
</tr>
<tr>
<td align="right">LastName</td>
<td><input type="text" name="Lastname" required pattern="[A-Za-z]{1,10}" title="plz write only letter." /></td>
</tr>
<tr>
<td align="right">user name</td>
<td><input type="text" name="FullName" required /></td>
</tr>
<tr>
<td align="right">Email</td>
<td><input type="text" name="Email" required pattern="([A-Za-z0-9])+/@([A-Za-z0-9])+/.com"/></td>
</tr>
<tr>
<td align="right">Password</td>
<td><input type="password" name="pass" required /></td>
</tr>
<tr>
<td align="right">Re-password</td>
<td><input type="password" name="mpass" required onkeyup="confirmpass()"/><span id="mn"></span></td>
</tr>
<tr>
<td>D.O.B</td>
<td><input type="date" name="D.O.B" required /></td>
</tr>
<tr>
<td align="right">Mobile</td>
<td><input type="text" name="Mobile" required pattern="[0-9]{11}" title="plz write only digit." /></td>
</tr>

<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
<option value="4">pakistan</option>
</select>
</td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" required pattern="[0-9]{5}" title="plz write only 5 digit."/></td>
</tr>
<tr>

<td>Gender</td>
<td>
<input type="radio" name="male" value="male" required />Male<br>
<input type="radio" name="male" value="female" />female<br>
</td>

</tr>
<tr>
<td align="right"></td>
<td><input type="checkbox" name="chk" required />I agree with Terms & Conditions</td>

</tr>



<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>

</form>




</body>
</html>
    Code (markup):
     
    Tony Toreto, Nov 15, 2014 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Well, what are you doing for ACTUAL server-side validation? Do you even have that written yet since JS validation means jack **** and can't be trusted, and is only there as a quick aid to the user NOT for ACTUAL validation... Remember the big rules:

    1) NEVER trust ANY client side validation -- at which point you have to question why bother having it.

    2) If you can't make it work without scripting first, you likely have no business adding scripting to it.

    ... and cleaning up that disaster into something remotely resembling proper and sane code would probably help a LOT on this. 90%+ of that markup belongs in the trash.

    Oh, and @Tony Toreto, that's a joke, right? On top of the preventing the use of non-ascii7 names and being pointless client-side crap, tables for layout? REALLY? Where's your fieldsets and labels, or do you not actually know enough HTML to have responded to this thread?
     
    deathshadow, Nov 15, 2014 IP
  8. muchochiz

    muchochiz Active Member

    Messages:
    148
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #8
    Hello Deathshadow
    Thanks a lot for replying to my post , I know you from webdeveloper.com , you helped me out weeks ago. I really look forward to your response. Please check your pm. Thanks in advance
     
    muchochiz, Nov 15, 2014 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    I replied to your PM, but thought I should share with the group.

    Before you even THINK about adding "user aids" in the form of client side/scripting validation, you should have the form -- particularly one as simple as this -- working SERVER-SIDE with SERVER-SIDE validation. Client side validation (HTML 5 or JavaScript) can be unavailable, disabled, or worse, outright bypassed. The last of those being a popular trick of spammers who want to fill your system with crap messages. You cannot trust it, so you HAVE to make it work on the server as if JavaScript never even existed FIRST.

    That's a good thing, 1) it means you can automatically have scripting off/blocked graceful degradation, 2) it helps harden the system, 3) It's actually SIMPLER in the long run.

    The only reason to add scripting validation is to avoid the pageload (a lame excuse used by fools who likely have no business making websites) and to possibly save bandwidth if it's resent too many times. The latter is a valid concern, but really if you are having enough form entries rejected you likely have something wrong with the form -- from simple things like not clearly labeling your required inputs as required, to outright broken/non-degrading scripting or needlessly convoluted interface design. (see "PSD Jockey" and "Scripttard" for more)

    IF you add client side checks at all, it should be for the convenience of the user, NOT as actual validation of values. That's just security 101.

    Now, to do this, as mentioned clean up the markup... there is NO reason for that form to vary much from:
    <form id="commentForm" method="put" action="">

	<fieldset>
	
		<label for="commentFirstName">First Name:<b>*</b></label><br />
		<input type="text" id="commentFirstName" name="firstName" /><br />
		
		<label for="commentLastName">Last Name:</label><br />
		<input type="text" id="commentLastName" name="lastName" /><br />

		<label for="commentEmail">E-Mail:<b>*</b></label><br />
		<input type="text" id="commentEmail" name="email" /><br />
		
		<label for="commentPhone">Telephone Number</label><br />
		<input type="text" id="commentPhone" name="phone" /><br />
		
		<label for="commentTopic">What is your question or comment regarding?</label>
		<select id="commentTopic" name="topic">
			<option></option>
			<option>Topic 1</option>
			<option>Topic 2</option>
			<option>Topic 3</option>
		</select><br />
		
		<label for="commentMessage">Please tell us what's on your mind:<b>*</b></label>
		<textarea id="commentMessage" name="message"></textarea>
		
	</fieldset>
	
	<div class="submitsAndHiddens">
		<input type="submit" value="Submit" />
		<input type="hidden" name="verifyHash" value="ASDFGSDBXCVBESERGEB" />
		<!-- hash should be random generated server side and stored in session with a expiration -->
	</div>
	
</form>
    Code (markup):
    Other than either not grasping how to use HTML, not grasping how to use CSS, or a hefty combination of both.

    Though server-side the approach I usually use involves putting my labels, ID prefixes, element name, etc, etc, and using that array to build the form AND as the guide for validation. If I were to add client-side checks I'd have the template output classes saying what validations should be performed (like v_email, v_required) as well as error classes (v_error) as triggers for the script to walk the DOM and process them... you could use the HTML 5 versions as well, though I'm refusing to use that on moral grounds given what utter and complete idiotic mouth-breathing halfwit "bleeding edge of 1997 thinking" bull HTML 5 is. I'm also not wild about how inconsistent the behavior for the fields are across browsers; at least with scripting you can make it behave the same!

    In either case though, this is more of a JS and server-side programming question than a HTML one... though damn, that HTML. Just what WYSIWYG vomited up that mess since no human being would write code like that?
     
    deathshadow, Nov 17, 2014 IP