footballer27
02-25-2012, 03:31 AM
Hey all,
I'm new to validating forms, so I'm trying to use jquery to do so. So far I have
<script type="text/javascript">
jQuery.noConflict();
var jQ = jQuery;
jQ(document).ready(
jQ("#register").validate({
rules: {
email1: {
required: true,
email: true
},
email2: {
required: true,
email:true
}
},
messages: {
email1:{
required: "Required",
email: "Must be a valid email"
},
email2:{
required: "Required",
email: "Must be a valid email"
}
}
})
);
</script>
</head>
<body>
<div id="createDiv" class="left loginBox" style="overflow:hidden;">
<form id="register" name="register" action="" method="post">
<legend>Register for a new Account</legend>
<fieldset style="border:0px; margin:0px; padding:0px;">
<div style="float:left; margin-right:15px;">
<p>
<label for="email1">Email Address:</label><br style="margin-top:0px;"/>
<input type="text" id="email1" name="email1" style="width:200px"/>
</p>
<p>
<label for="pass1">Create Password:</label><br style="margin-top:0px;"/>
<input type="password" id="pass1" name="pass1" class="required" style="width:200px"/>
</p>
</div>
<div style="float:right;">
<p>
<label for="email2">Confirm Email Address:</label><br style="margin-top:0px;"/>
<input type="text" id="email2" name="email2" style="width:200px"/>
</p>
<p>
<label for="pass2">Confirm Password:</label><br style="margin-top:0px;"/>
<input type="password" id="pass2" name="pass2" class="required" style="width:200px"/>
</p>
</div>
<div style="clear:both;"></div><br/>
<input style="padding:5px 10px;" class="submit" type="submit" id="createSubmit" name="createSubmit" value="Create Account"/>
</fieldset>
</form>
I had it working when I only used validate and used classes to determine the rules. since this is really limited, I am trying to get away from that, but I can't figure out what I'm doing wrong. any help would be appreciated.
I'm new to validating forms, so I'm trying to use jquery to do so. So far I have
<script type="text/javascript">
jQuery.noConflict();
var jQ = jQuery;
jQ(document).ready(
jQ("#register").validate({
rules: {
email1: {
required: true,
email: true
},
email2: {
required: true,
email:true
}
},
messages: {
email1:{
required: "Required",
email: "Must be a valid email"
},
email2:{
required: "Required",
email: "Must be a valid email"
}
}
})
);
</script>
</head>
<body>
<div id="createDiv" class="left loginBox" style="overflow:hidden;">
<form id="register" name="register" action="" method="post">
<legend>Register for a new Account</legend>
<fieldset style="border:0px; margin:0px; padding:0px;">
<div style="float:left; margin-right:15px;">
<p>
<label for="email1">Email Address:</label><br style="margin-top:0px;"/>
<input type="text" id="email1" name="email1" style="width:200px"/>
</p>
<p>
<label for="pass1">Create Password:</label><br style="margin-top:0px;"/>
<input type="password" id="pass1" name="pass1" class="required" style="width:200px"/>
</p>
</div>
<div style="float:right;">
<p>
<label for="email2">Confirm Email Address:</label><br style="margin-top:0px;"/>
<input type="text" id="email2" name="email2" style="width:200px"/>
</p>
<p>
<label for="pass2">Confirm Password:</label><br style="margin-top:0px;"/>
<input type="password" id="pass2" name="pass2" class="required" style="width:200px"/>
</p>
</div>
<div style="clear:both;"></div><br/>
<input style="padding:5px 10px;" class="submit" type="submit" id="createSubmit" name="createSubmit" value="Create Account"/>
</fieldset>
</form>
I had it working when I only used validate and used classes to determine the rules. since this is really limited, I am trying to get away from that, but I can't figure out what I'm doing wrong. any help would be appreciated.