jquery validation and bootstrap 3
-
05-06-2023 - |
Question
I am trying to get this code to work I found here Infotuts.com
When I process the form the realtime validating is not happening. Here is spot in server where I am testing. My testing page
I have submitted a question to the coder but have failed to get a reply. Maybe someone can help. I believe maybe the way I called my libraries may be wrong or the order in which I called them.
I am just trying to get the validating working before I start tweaking it for my application.
Any solutions or similar scripts I can use? I want to use the alert-success bootstrap 3 has while validating. At this point when I click submit the data goes into the browser but the script that creates the post action is failing.
Here is the code from my head section.
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="includes/css/bootstrap-select.css" type="text/css"/>
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script type="text/javascript" src="includes/js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="includes/js/jquery.json-2.4.min.js"></script>
<script type="text/javascript" src="includes/js/jquery-validate.min.js"></script>
<script type="text/javascript" src="includes/js/bootstrap-select.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$.validator.setDefaults({
submitHandler: function (form) {
$.ajax({
type: "POST",
url: "email.php",
data: {
'val': $(".myfirstform").serializeJSON()
}
}).done(function (data) {
alert(data);
});
}
});
$(".myfirstform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
website: {
required: false,
url: true
},
cate: "required",
msg: {
required: true,
maxlength: 300
}
},
errorClass: "error",
highlight: function (label) {
$(label).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function (label) {
label
.text('Seems Perfect!').addClass('valid')
.closest('.form-group').addClass('has-success');
}
}
);
});
</script>
<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker({
'selectedText': 'cat'
});
// $('.selectpicker').selectpicker('hide');
});
</script>
Here is my form code:
<form class="myfirstform" role="form">
<div class="form-group">
<label class="control-label">Name</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" name="name" placeholder="Name">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Email</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label">Website</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<input type="text" class="form-control" id="lname" name="website" placeholder="website url">
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label">Category</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="cate" class="form-control selectpicker show-tick">
<option> Website Design and Development</option>
<option> Social Media Campaign Management</option>
<option> Keyword Analysis</option>
</select>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label">Message</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="msg" class="form-control " rows="4" cols="78" placeholder="Enter your message here"></textarea>
</div>
</div>
</div>
<div class="controls" style="margin-left: 40%;">
<button type="submit" id="mybtn" class="btn btn-primary">Send Message</button>
</div>
</div>
</form>
Here is my php script which emails the form:
<?php
$val= $_POST['val'];
$toemail='myemail@email.com<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>'; // change this to your email id
$name = $val['name'];
$email = $val['email'];
$website = $val['website'];
$category = $val['cate'];
$msg = $val['msg'];
$subject = 'Message from infotuts.com contact form';
$headers = "From: myemail@email.com<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script> \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<b>Name :</b>".$name."<br>";
$message .='<b>Email :</b>'.$email."<br>";
$message .='<b>Website :</b>'.$website."<br>";
$message .='<b>Category :</b>'.$category."<br>";
$message .='<b>Message :</b>'.$msg;
mail($toemail, $subject, $message, $headers);
echo "Thanks for contacting us!";
?>
No correct solution