Skip to content

Instantly share code, notes, and snippets.

@extrasleepy
Last active Dec 5, 2019
Embed
What would you like to do?
contact_me.js
$(function() {
$("input,textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
// Prevent spam click and default submit behaviour
$("#btnSubmit").attr("disabled", true);
event.preventDefault();
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "././mail/contact_me.php",
type: "POST",
data: {
name: name,
phone: phone,
email: email,
message: message
},
cache: false,
success: function() {
// Enable button & show success message
$("#btnSubmit").attr("disabled", false);
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
.append("</button>");
$('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
})
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
// When clicking on Full hide fail/success boxes
$('#name').focus(function() {
$('#success').html('');
});
@adm0442
Copy link

adm0442 commented Feb 28, 2019

Hi Team
Again this is around using the select field, as pointed out by @ Angelluc. This doesnt work !! Its 2 years now that i have been looking for the ans and solution to this and i am yet to give up cos i know there is some one out there that knows this. Please Help.

Like Angelluc said, i have tried the following without any success

$("#contactForm input,#contactForm textarea,#contactForm select").jqBootstrapValidation({
I have added #contactForm select

Then
var radiobuttons = $("input#radiobuttons").val();
var message = $("select#message").val();

Html Files Below

None Volvo Saab Mercedes Audi

Please what are my doing wrong - I need the Select field to validate in red as well

Thanks in Advance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment