Simple and practical feedback form with no refresh submit with validation

  • 2020-03-29 23:45:34
  • OfStack

Js files can be viewed in source code

XML/HTML Code
 
<div id="preview"></div> 
<div id="formbox"> 
<form name="form" id="form" action="submit.php" method="post"> 
<ul id="ngothastyle3" > 
<li> 
<label>Name</label> 
<input type="text" name="name" class="" maxlength="40" /> 
</li> 
<li> 
<label>Email</label> 
<input type="text" name="email" class="" maxlength="100" /> 
</li> 
<li> 
<label>Message</label> 
<textarea name="message" rows="5" cols="45" class=""></textarea> 
</li> 
<li> 
<label> </label> 
<input type="submit" value="Submit"> 
</li> 
</ul> 
</form> 
</div> 

JavaScript Code
 
<script type="text/javascript"> 
$('document').ready(function(){ 

$('#form').validate({ 
rules:{ 
"name":{ 
required:true, 
maxlength:40 
}, 

"email":{ 
required:true, 
email:true, 
maxlength:100 
}, 

"message":{ 
required:true 
}}, 

messages:{ 
"name":{ 
required:"This field is required" 
}, 

"email":{ 
required:"This field is required", 
email:"Please enter a valid email address" 
}, 

"message":{ 
required:"This field is required" 
}}, 

submitHandler: function(form){ 
$(form).ajaxSubmit({ 
target: '#preview', 
success: function() { 
$('#formbox').slideUp('fast'); 
} 
}); 

} 

}) 

}); 
</script> 

Related articles: