0

I was reading a tutorial on form validation and I followed it. The form is still not validated. Please help me out. Thanks

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>    
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
    $("#registerForm").validate();
  });
</script>

<title>9am Resource Agency</title>
</head>

Here is the form,

 <form id="form1" class="registerForm" method="post" action="mailsent.php">                                                
                      <input name="name" class="required" type="text" minlength="3"  id="name"  style="font-family: Verdana; color:#FFFFFF; ; font-size: 13px; background-color: #0E0E0F;border: 1px solid #740086; margin-bottom:10px;  width:385px;" size="32" value="Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>                  
                      <input name="email" class="required" type="text" id="email" minlength="5"  style=" font-family: Verdana;  font-size: 13px;  color:#FFFFFF; background-color: #0E0E0F; border: 1px solid #740086;  margin-bottom:10px;   width:385px;" size="38" value="Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
                      <input name="phone"  type="text" id="phone" minlength="7" style=" font-family: Verdana; color:#FFFFFF; font-size: 13px;background-color: #0E0E0F; border: 1px solid #740086; width:385px;  margin-bottom:10px;" size="385" value="Phone #" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
                     <textarea
                     minlength="10"
                     class="required"
    name="message"
    cols="37"
    rows="12"
    id="message"
    style="font-family:Verdana; color:#FFFFFF; font-size:13px; background-color:#0E0E0F; border:1px solid #740086; width:385px;margin-bottom:10px;overflow:hidden;"
    onFocus="if(this.value==this.defaultValue)this.value='';"
    onBlur="if(this.value=='')this.value=this.defaultValue;">
Message
</textarea>

                      <input style="margin-left:303px; margin-top:20px;" type="image" src="logonbutton.png" name="Submit" value="Submit" />                    
   </form>
Improve this question

4 Answers 4

Reset to default
3

You're using $("#registerForm").validate(); but your form id is form1. Change to:

$("#form1").validate();
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

There is no need to include two jquery-core file in the head.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
Improve this answer

1 Comment

Thanks. I just removed the older version.
2

working demo http://jsfiddle.net/dMTCq/

Good link: http://docs.jquery.com/Plugins/Validation/validate

Also something extra for you from one of my previous demo: http://jsfiddle.net/CRfuZ/

This should help :)

code

jQuery(function($) {
    $("#form1").validate();
});

*and in case you want to use for class use * . like this.

jQuery(function($) {
    $(".registerForm").validate();
});
Improve this answer

3 Comments

If you see, the other input field except the text area are still not working.
It works fine. I was actually not removing the displayed text. Thanks
@StartupCrazy lol cooleos, late late night at my end, But Glad I can help! have a nice one! :)
1

I'm curious as to why you have 2 versions of jQuery in your script tags. Version 1.6.1 and version 1.3.2

You also are not including jQuery unobtrusive validation which is needed if you want to perform jQuery validation.

I suggest removing the version 1.3.2 line, because it is conflicting with 1.6.1 and then adding the necessary scripts for validation. In this order:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

If you want to the most current version of jQuery I suggest instead of using the 1.6.1 script use this.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

These 4 lines can be placed in your _Layout view in the head section so that they are available to all views. Then you don't have to place these in your individual Views at all

Improve this answer

1 Comment

Thanks. I just removed the older version.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.