Aryan Kanwar Aryan Kanwar - 3 months ago 9
jQuery Question

HTML5 validations not working

I have made a contact form. In this form I have added input validations like email for email text box and maximum length for phone number 10 in the contact textbox. But these validations are not working in my case.

What I'm doing wrong?

AJAX Call

function myformsubmit() {
var name = document.getElementById("name").value;
var mail = document.getElementById("mail").value;
var contact = document.getElementById("contact").value;
var reason = document.getElementById("reason").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1=' + name + '&mail1=' + mail + '&contact1=' + contact+ '&reason1=' + reason;

if (name == ''||mail == ''|| reason == ''||contact == ''){
alert("Please Fill all fields");
}else{
// AJAX code to submit form.
$.ajax({
type : "POST",
url : "http://test1.com/wp-content/themes/suave/theme_option/1.php",
data : dataString,
cache : false,
success : function(html) {
alert(html);
window.location="http://test1.com";
}
});
}
return false;
}




@media screen and (max-width: 972px) and (min-width: 100x) {
.exitpopup-modal-window {
display: none;
}
}
#exitpopup-modal .modal-body {
padding: 0px;
}
.modal-body {
padding: 0px;
}
.second img {
width: 369px;
height: 404.6px;
margin-top: -1%;
}
.first form {
display: table;
margin-left: 34px;
margin-top: 43px;
}
.row1 {
font-size: 10px;
font-family: inherit;
display: table-row;
border: 2px solid red;
}
.row1 #name,
#mail,
#contact {
color: black;
width: 260px;
height: 34px;
padding: 6px 12px;
border-radius: 3.9px;
border-color: #777;
display: table-cell;
}
.row1 textarea {
width: 260px;
height: 110px;
color: black;
border-color: #777;
display: table-cell;
}
.row1 #submit {
width: 152px;
height: 44px;
margin-left: 15%;
background-color: #337ab7;
color: white;
border-color: none;
}
.row1 #submit:hover {
width: 152px;
height: 44px;
margin-left: 15%;
background-color: white;
color: #337ab7;
border-color: none;
}
.second,
.first {
float: left;
}
.clearfix {
clear: both
}
.first span {
margin-left: 25%;
font-family: inherit;
font-size: 15px;
padding-top: 3px;
}
<div class="exitpopup-modal-window">
<div class="second">
<img src="http://www.buildzar.com/listing-assets/images/home-new/get-quote/bg-lead-form-web.png">
</div>
<div class="first">
<span>We are there to help you</span>

<form id="form" name="theform">
<div class="row1">
<input id="name" type="text" placeholder="Your name *" required>
<br>
<br>
</div>
<div class="row1">
<input type="email" id="mail" placeholder="Your email *" required>
<br>
<br>
</div>
<div class="row1">
<input id="contact" type="number" maxlength="10" placeholder="Your phonenumber*" required>
<br>
<br>
</div>
<div class="row1">
<textarea id="reason" rows="5" placeholder="Any reason to leave ?*" required></textarea>
<br>
<br>
</div>
<div class="row1">
<input id="submit" onclick="myformsubmit()" type="button" value="Submit">
</div>
</form>
</div>
<div class="clearfix"></div>




Answer

Your button type should be submit.

 <input id="submit"  type="submit" value="Submit">

And within for tag you should have action

<form id="form" name="theform" action="javascript:myformsubmit()">