I'm trying to build a long form that is validated with BootstrapValidator which I am very new at.
My biggest issue is that if one field is incorrect it marks ALL of the fields with the red coloring even if the success check marks stay. The form submits properly but the visual validation is what seems very off.
To see the form in action.... You can really see the issue if you click submit with nothing filled in, then proceed to fill it in correctly.
http://chelseaporter.com/APSoPC/adoptForm3.php
Here is a snippet of my HTML code and my javascript.
THANKS ALL!
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Name</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Full Name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="email">Email Address</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="email" name="email" placeholder="Your email address" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="address">Street Address</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="address" name="address" placeholder="Your Street Address">
</div>
</div>
<!--many more fields)-->
<div class="form-group">
<div class="col-md-6 col-md-offset-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div><!-- closes panel Body-->
$(document).ready(function () {
var validator = $("#adoption-form").bootstrapValidator({
//live: 'disabled',
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields : {
name :{
validators : {
notEmpty : {
message : "Please provide your name."
},
stringLength: {
min : 4,
max: 35,
message: "Name must be between 4 and 35 characters long"
},
}//end validators
},
email :{
validators : {
notEmpty : {
message : "Please provide an email address"
},
regexp: {
regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
message: 'The value is not a valid email address'
}
}//end validators
},
address : {
validators : {
notEmpty : {
message: "Address is required"
}
}//end validators
},
city : {
validators : {
notEmpty : {
message: "City is required"
}
}//end validators
},
state : {
validators : {
notEmpty : {
message: "State is required"
}
}//end validators
},
zip : {
validators : {
notEmpty : {
message: "Zip is required"
}
}//end validators
},
years : {
validators : {
notEmpty : {
message: "Years at current address is required"
},
numeric : {
message: "Valid number of years lived at current address is required (only numbers)"
}
}//end validators
},
hPhone : {
validators : {
notEmpty : {
message: "Home phone is required. If you only have one phone please enter that number for Home Phone AND Alt Phone."
},
phone : {
country: 'US',
message: "Valid phone number is required (only numbers)"
}
}//end validators
},
altPhone : {
validators : {
phone : {
country: 'US',
message: "Valid phone number is required"
}
}//end validators
},
dNumber : {
validators : {
notEmpty : {
message: "Driver's License number is required"
},
numeric : {
message: "Valid Driver's License number is required (only numbers)"
}
}//end validators
},
dState : {
validators : {
notEmpty : {
message: "Driver's License state is required"
}
}//end validators
},
ePhone : {
validators : {
phone : {
country: 'US',
message: "Valid phone number is required"
}
}//end validators
},
hType : {
validators : {
notEmpty : {
message: "Home Type required."
}
}//end validators
},
hStatus : {
validators : {
notEmpty : {
message: "Home Status Required"
}
}//end validators
},
lNumber : {
validators : {
phone : {
country: 'US',
message: "Valid phone number is required"
}
}//end validators
},
student : {
validators : {
notEmpty : {
message: "Please answer if you are a student."
}
}//end validators
},
} //end ALL validators
});
validator.on("success.form.bv", function (e) {
if (data.fv.getInvalidFields().length > 0) { // There is invalid field
data.fv.disableSubmitButtons(true);
}
e.preventDefault();
$("#adoption-form").addClass("hidden");
$("#confirmation").removeClass("hidden");
var $form = $(e.target),
fv = $form.data('bootstrapValidator');
});
//process the form
$("#adoption-form").submit(function(event) {
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'address' : $('input[name=address]').val(),
'city' : $('input[name=city]').val(),
'state' : $('select[name=state]').val(),
'zip' : $('input[name=zip]').val(),
'years' : $('input[name=years]').val(),
'hPhone' : $('input[name=hPhone]').val(),
'altPhone' : $('input[name=altPhone]').val(),
'dNumber' : $('input[name=dNumber]').val(),
'dState' : $('input[name=dState]').val(),
'employer' : $('input[name=employer]').val(),
'ePhone' : $('input[name=ePhone]').val(),
'hType' : $('select[name=hType]').val(),
'hStatus' : $('select[name=hStatus]').val(),
'lName' : $('input[name=lName]').val(),
'LNumber' : $('input[name=LNumber]').val(),
'student' : $('select[name=student]').val(),
'sName' : $('input[name=sName]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'process.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
console.log(formData);
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
console.log(formData);
});
});
