We Keep Coding

How to change only error message color of input form-control

I am trying to style my first website.
I am using Bootstrap 4 and the jquery validation plugin and I am doing a form right now. I have two problems:
First, I only want to change the color of the error message below my input, but my styling changes the input text size/color and the error message text size/color, how can I only change error text below an input?
Second question is, where in my code do I change the Bootstrap form control state, depending on valid or not?
This is my code so far:
$('document').ready(function(){
$('#registration_form').validate({
rules: {
username: {
required: true,
maxlength: 10,
minlength: 3
},
email: {
required: true,
email: true
},
email_con: {
required: true,
equalTo: "#email"
},
password: {
required: true,
minlength: 7
},
password_con: {
required: true,
equalTo: "#password"
},
formCheck: {
required: true
},
}
});
});
.error{
color: red;
font-Size: 13px;
}
<div class="form-row form-group">
<div class="col-sm-4 col-xl-3 text-center d-xl-flex justify-content-xl-center align-items-xl-center label-column"><label class="col-form-label">Email* :</label></div>
<div class="col-sm-6 input-column"><input class="form-control" type="email" name="email" id="email" placeholder="name#mail.com"></div>
</div>

If you want to change color of error text message only then write like label.error{color: red;} and follow below html structure.
$(document).ready(function(){
$('#registration_form').validate({
rules: {
email: {
required: true,
email: true
}
}
});
});
label.error{
color: red;
font-size: 13px;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<div class="container my-2">
<div class="row">
<form class="col-sm-12" action="#" id="registration_form">
<div class="form-row form-group">
<div class="col-sm-4 text-sm-right">
<label class="col-form-label" for="email">Email* :</label>
</div>
<div class="col-sm-6">
<input class="form-control" type="email" name="email" id="email" placeholder="name#mail.com">
</div>
</div>
<div class="form-row form-group">
<div class="col-sm-6 offset-sm-4">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>

There are classes to deal with validaiton when it comes to bootstrap usage. Try like this
<div class="container">
<p class="h1">Register</p>
<form class="needs-validation" novalidate>
<div class="form-group">
<label for="email">E-mail</label>
<input type="email" class="form-control" id="email"
placeholder="E-mail" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
The e-mail is required!
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Password" required minlength="6">
<div class="valid-feedback">
Great!
</div>
<div class="invalid-feedback">
The password must contain at least 6 characters!
</div>
</div>
<div class="form-group mt-3">
<button class="btn btn-primary" type="submit">Register!</button>
</div>
</form>
</div>
<script>
(function() {
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>

You can run a snippet in full page and check this answer
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<p class="h1">Register</p>
<form class="needs-validation" novalidate>
<div class="form-group">
<label for="email">E-mail</label>
<input type="email" class="form-control" id="email"
placeholder="E-mail" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
The e-mail is required!
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Password" required minlength="6">
<div class="valid-feedback">
Great!
</div>
<div class="invalid-feedback">
The password must contain at least 6 characters!
</div>
</div>
<div class="form-group mt-3">
<button class="btn btn-primary" type="submit">Register!</button>
</div>
</form>
</div>
<script>
(function() {
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>

formvalidation.io check isvalid javascript

I have 2 inputs and upon clicking the button I want to check if 1 input is really validated or not (this is to bypass all the validation to check only 1)
I can revalidate it, but I want some boolean feedback if it is validated.
something similar to ' var isValidStep = fv.isValidContainer($tab); '
Thanks.
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fFname" class="child">First Name</label>
<input name="legalFirstName" class="form-control req" id="fFname" autocomplete="off" type="text" />
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fLname" class="child">Last Name</label>
<input name="legalLastName" class="form-control req" autocomplete="off" id="fLname" type="text" />
</div>
<button type="button" value="Submit" class="btn btn-success easing-effect btn-padding btn-submit subbutton" name="submit" id="subbutton">Submit</button>
<script>
$('.rootwizard').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
live: 'enabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// Name Validation
locale: 'en',
fields: {
legalFirstName: {
live: 'enabled',
trigger: 'blur',
validators: {
stringLengthName: {
max: 30,
},
notEmptyName: {},
regexpName: {
regexpName: /^[a-zA-Z][a-z\sA-Z0-9.,$;]*$/,
}
}
},
legalLastName: {
live: 'enabled',
trigger: 'blur',
validators: {
stringLengthName: {
max: 30,
},
notEmptyName: {},
regexpName: {
regexpName: /^[a-zA-Z][a-z\sA-Z0-9.,$;]*$/,
}
}
}
}
});
$('.btn-submit').click(function() {
$('.rootwizard').formValidation('revalidateField', 'legalFirstName');
});

add 'form' tag to your html and change type button to 'submit' like this :
<form class="rootwizard">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fFname" class="child">First Name</label>
<input name="legalFirstName" class="form-control req" id="fFname" autocomplete="off" type="text" />
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fLname" class="child">Last Name</label>
<input name="legalLastName" class="form-control req" autocomplete="off" id="fLname" type="text" />
</div>
<button type="submit" value="Submit" class="btn btn-success easing-effect btn-padding btn-submit subbutton" name="submit" id="subbutton">Submit</button>
</form>

bootstrap validator submit handle

I am using bootstrap validator to validate my form created with bootstrap.
I have used the bootstrapValidator function to validate my form and also built in submitHandle of this function. In submitHandle, i am using simply post method as you can see.
major problem is I am not able to submit my form after clicking the submit button.You can also run code snippet and can see that after hitting submit button,it just stuck and then if I change any of the above field and then click submit again then it works fine. Not able to make it work on first attempt.
Not able to find bug....any help would be appreciated.
thanks!!
$(document).ready(
function() {
var validator = $("#registration-form").bootstrapValidator({
live: 'enabled',
feedbackIcons: {
//valid: 'glyphicon glyphicon-ok',
//invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fname: {
message: "this field is required",
validators: {
notEmpty: {
message: "this field is required"
},
stringLength: {
max: 20,
message: "this field cannot be larger than 20 characters"
}
}
},
lname: {
message: "This field is required",
validators: {
notEmpty: {
message: "this field is required"
},
stringLength: {
max: 20,
message: "this field cannot be larger than 20 characters"
}
}
},
department: {
validators: {
greaterThan: {
value: 1,
message: "choose one department"
}
}
},
year: {
validators: {
greaterThan: {
value: 1,
message: "select your current year"
}
}
},
email: {
message: "Email address is required",
validators: {
notEmpty: {
message: "Please provide an email address"
},
emailAddress: {
message: "invalid email address"
}
}
}
},
submitHandler: function(validator, form, submitButton) {
$.ajax({
url: 'register.php',
type: 'post',
dataType: 'json',
data: $("#registration-form").serialize(),
success: function(data) {;
}
});
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning Boostrap</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/basic-template.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- BootstrapValidator CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />
<!-- jQuery and Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js" type="text/javascript"></script>
<!-- BootstrapValidator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="column col-md-6">
<div class="panel panel-default panel_custom">
<div class="panel-heading" style="background:linear-gradient(to left,black 70%,#300032); border:0px">Registration</div>
<div class="panel-body">
<form id="registration-form" method="POST" action="register.php" role="form">
<div class="form-group">
<label class="control-label" for="fname">name:</label>
<div class="row">
<div class="column col-md-6">
<input type="text" class="form-control" id="fname" name="fname" placeholder="First" />
</div>
<div class=" col-md-6">
<input type="text" class="form-control" id="lname" name="lname" placeholder="Last" />
</div>
</div>
</div>
<div class="row">
<div class="column col-md-6">
<div class="form-group">
<label class="control-label" for="department" style="padding-top:10px">Department:</label>
<Select id="department" name="department" class="form-control" ">
<option value="0 ">choose one</option>
<option value="1 ">computer Science</option>
<option value="2 ">Bio medical science</option>
<option value="3 ">Instrumentaion</option>
<option value="4 ">Physics</option>
<option value="5 ">Polymer science</option>
<option value="6 ">Microbiology</option>
<option value="7 ">Food technology</option>
<option value="8 ">Electronics</option>
</select>
</div>
</div>
<div class="form-group ">
<div class="column col-md-6 " >
<label class="control-label " for="year " style="padding-top:10px ">Year:</label>
<Select id="year " name="year " class="form-control " ">
<option value="0">choose year</option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="column col-md-6">
<div class="form-group">
<label class="control-label" for="male" style="padding-top:10px">Gender:</label>
<div class="radio">
<label>
<input type="radio" value="1" name="gender" required/>Male</label>
</div>
<div class="radio">
<label style="padding-left:20px">
<input type="radio" value="2" name="gender" />Female</label>
</div>
</div>
</div>
<div class="column col-md-6">
<div class="form-group">
<label class="control-label" for="email" style="padding-top:10px">E-mail Address:</label>
<input type="text" class="form-control" id="email" placeholder="Email Address" name="email" />
</div>
</div>
</div>
<div class="row">
<div class="column col-md-12">
<button class="btn btn-success" type="submit" value="but" name="submit">Submit</button>
</div>
</div>
</form>
<div id="confirmation" class="alert alert-success hidden" style="background:linear-gradient(to left,black 70%,#300032); border:none;">
<span class="glyphicon glyphicon-star"></span>
<h4>Thank you for registering. We will revert back shortly on email provided by you</h4>
</div>
</div>
</div>
</div>
</body>
</html>

Open modal only when form is validated

I want to open a modal dialog box only when form is completely validated with no error. At first i have disabled my button so that it should validate first and it should be enable only when form is validated. I am using jquery validation for this but does not get the result which i want. I want when user click submit button if fields are not filled it should not open modal.
here is my HTML code
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-white" type="reset">Cancel</button>
<!-- Trigger the modal with a button -->
<button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal" disabled />Confirm</button>
</div>
</div>
and me jquery for this
(function() {
$('#PasswordForm > input').keyup(function() {
var empty = false;
$('#PasswordForm > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#myBtn').attr('disabled', 'disabled');
} else {
$('#myBtn').removeAttr('disabled');
}
});})()
The form validation which i used is
$(document).ready(function()
{
$('#PasswordForm').formValidation({
message: 'This value is not valid',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:
{
NPassword:
{
validators:
{
notEmpty:
{
message: 'The password is required and can\'t be empty'
}
}
},
RPassword:
{
validators:
{
notEmpty:
{
message: 'The confirm password is required and can\'t be empty'
},
identical:
{
field: 'NPassword',
message: 'The password and its confirm are not the same'
}
}
}
}
});
});
<form id="PasswordForm" method="post" class="form-horizontal" action="/HRM/HRM.PasswordChange">
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Employee Name</label>
<div class="col-sm-10">
<input type="text" disabled="" value="##UserName##" class="form-control">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">New Password</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<input type="password" name="NPassword" placeholder="New Password" class="form-control">
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Retype Password</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<input type="password" name="RPassword" placeholder="Retype Password" class="form-control">
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-white" type="reset">Cancel</button>
<!-- Trigger the modal with a button -->
<button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal" disabled />Confirm</button>
</div>
</div>
</form>
any suggestion or help would be appreciated.

Try to change your button to:
<button type="button" id="myBtn" class="btn ban-primary">Confirm</button>
And add following function:
$('#myBtn').on('click', function(){
if(!empty) {
$('#myModal').modal('toggle');
}
});
You have to make empty a global variable.
(untested code)

form validation not working in visualforce which working in html

Form validation is not working but same code is running in html and form validation also works i have uploaded all static resources please suggest me what changes in code are required.
1. I have uploaded static resourced successfully.
2. All files path is correct.
3. Suggest me if any changes necessary for html tag to visualforce tag
<apex:stylesheet value="{!URLFOR($Resource.validation, 'valid/bootstrap.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.validation, 'valid/formValidation.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.validation,'valid/bootstrap.min.js')}"/>
<apex:includeScript value="{!$Resource.bootstrapjs}"/>
<apex:includeScript value="{!URLFOR($Resource.validation,'valid/bootstrap1.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.validation,'valid/formValidation.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.validation,'valid/jquery.min.js')}"/>
</head>
<body>
<form id="basicBootstrapForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" id="captchaOperation"></label>
<div class="col-xs-4">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#basicBootstrapForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
}
});
});
</script>
</body>
</html>

Its an weird issue. It gets resolved when using the CDN like below in HEAD section after Jquery.js
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.min.js"></script>