We Keep Coding

User input validation Bootstrap 4 and JQuery?

I started learning Bootstrap 4 validation and there are few things that are not clear to me. Some of the situations are confusing in case where input fields that are not required are showing valid-feedback / invalid-feedback. Also, I'm wondering if there is a way to trigger validation with button on click instead of submit process? Here is example of what I have so far:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
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);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<fieldset class="fieldset-info">
<legend class="hcs-legend">Add New Profile</legend>
<form name="new-profile" id="new-profile" class="needs-validation" novalidate>
<div class="form-group required">
<label for="agency">Profile Name:</label>
<input class="form-control" type="text" name="profile" id="profile" value="" maxlength="120" placeholder="Enter the official name of your profile" required>
<div class="invalid-feedback">Please provide Profile Name</div>
</div>
<div class="form-group required">
<label>Type:</label>
<select class="custom-select browser-default" name="type" id="type" required>
<option value="">--Select Type--</option>
<option value="1">Large</option>
<option value="2">Medium</option>
<option value="3">Small</option>
</select>
<div class="invalid-feedback">Please provide Type</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="fname">First Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
<div class="invalid-feedback">Please provide First Name</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label" for="middle_ini">Middle Init:</label>
<div class="col-10">
<input class="form-control" type="text" name="middle_ini" id="middle_ini" value="" maxlength="1" placeholder="Enter Middle Initial (optional).">
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="lname">Last Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
<div class="invalid-feedback">Please provide Last Name</div>
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="email">Email:</label>
<div class="col-10">
<input class="form-control" type="text" name="email" id="email" value="" maxlength="50" placeholder="Enter Email" required>
<div class="invalid-feedback">Please provide Email</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Physical Address</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<div class="row">
<label class="col-3 col-form-label" for="Addr1">Address 1:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr1" id="Addr1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
<div class="invalid-feedback">Please provide Address 1</div>
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="city">City:</label>
<div class="col-10">
<input class="form-control" type="text" name="city" id="city" value="" placeholder="Enter City" maxlength="25" required>
<div class="invalid-feedback">Please provide City</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<div class="col-3">
<label for="Addr2">Address 2:</label>
</div>
<div class="col-9">
<input class="form-control" type="text" name="Addr2" id="Addr2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="state">State:</label>
<div class="col-10">
<select class="custom-select browser-default" name="state" id="state" required>
<option value="">--Select State--</option>
<option value="ny">New York</option>
<option value="fl">Florida</option>
</select>
<div class="invalid-feedback">Please provide State</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr3">Address 3:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr3" id="Addr3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="zip">Zip:</label>
<div class="col-10">
<input class="form-control" type="text" name="zip" id="zip" value="" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
<div class="invalid-feedback">Please provide Zip</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr4">Address 4:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr4" id="Addr4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="form-check-label" for="sameAddress">check this box if mailing address is the same of physical address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Access options</u></strong></div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_1" id="flag_1" value="Y">
<label class="form-check-label" for="flag_1">Allow for access level 1?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_2" id="flag_2" value="Y">
<label class="form-check-label" for="flag_2">Allow for access level 2?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_3" id="flag_3" value="Y">
<label class="form-check-label" for="flag_3">Allow for access level 3?</label>
</div>
<div class="row">
<div class="col-12 text-center">
<input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
</div>
</div>
</form>
</fieldset>
</div>
In the example above I used the code for validation form the Bootstrap web site. There is very little explained on how this works. I have few questions:
How I can trigger validation on click since I will use ajax to send request to the server?
Why fields that are not required are turning green (color around the input)?
How I can use pattern attribute to validate input value if it's correct or not with custom message for the user?
Please let me know if anyone knows how to achieve this?
Thank you.

Serialize a form in order to send it via Ajax

I want to send a form via Ajax, not via a submit button.
I defined the form as follows in the below code excerpt, and later I defined the jQuery function to trap the CREATE BUTTON action.
When I debug this I get that
console.log($('#customer_form').serialize()); does not throw anything.
Is this the right way of serializing a form?
Do the buttons need to be inside the <form></form> element?
Here is the used code:
HTML:
<form id="customer_form" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="name">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" aria-describedby="name_help" placeholder="Name">
<small id="name_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_1">Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
<small id="address_line_1_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_2"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
<small id="address_line_2_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="town">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="town" aria-describedby="town_help" placeholder="Town">
<small id="town_help" class="form-text text-muted"></small>
</div>
</div>
<button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>
</form>
JavaScript:
$(document).ready(function(){
$('#create').click(function(event) {
console.log('foo');
alert($('#customer_form').serialize());
event.preventDefault();
});
});

You just forgot to add the name attribute to your inputs:
<input name="nameofInput" .... />
-------^
See the below snippet:
$(document).ready(function(){
$('#create').click(function(event) {
console.log('foo');
alert($('#customer_form').serialize());
event.preventDefault();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="customer_form" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="name">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="name" id="name" aria-describedby="name_help" placeholder="Name">
<small id="name_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_1">Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adress1" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
<small id="address_line_1_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_2"></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adress2" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
<small id="address_line_2_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="town">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="town" id="town" aria-describedby="town_help" placeholder="Town">
<small id="town_help" class="form-text text-muted"></small>
</div>
</div>
<button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>
</form>

For, enter to focus next element disables js validation

Please check below js fiddle:
https://jsfiddle.net/Lfz567tw/
I have created a form in which when I enter, it selects next input and at last, submits the form.
But this function disables my validation function and on submitting the form, function validate() is not working.
Is there any way I can fire function validate() also when submitting the form?

There is simple example to show you how you can check or call your validate function before form submittion
e.preventDefault : Used for prevent default functionallity
$(function() {
$("#entertonext").submit(function(e) {
e.preventDefault();
// validate code (calling function)
validate();
});
});
function validate() {
alert('Validating');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="card-block" id="entertonext">
<form name="bank" action="#" method="post">
<div class="form-group row" >
<label for="default-input" class="col-sm-2 form-control-label">Account No.</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="acc_no" id="acc_no" placeholder="Account No." tabindex="1" onblur="validate(this,event)">
<span id="msg8"></span>
</div>
</div>
<div class="form-group row">
<label for="default-input-rounded" class="col-sm-2 form-control-label">Branch Name</label>
<div class="col-sm-10">
<div class="input-group icon icon-lg icon-color-primary">
<input type="text" class="form-control entertonext" name="b_name" id="b_name" placeholder="Branch Name" tabindex="2">
</div>
<span id="msg2"></span>
</div>
</div>
<div class="form-group row" id="drawn" >
<label for="default-input" class="col-sm-2 form-control-label">IFSC Code</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="ifsc_code" id="ifsc_code" placeholder="IFSC Code" tabindex="3">
<span id="msg5"></span>
</div>
</div>
<div class="form-group row" id="deposited">
<label for="default-input" class="col-sm-2 form-control-label">Address</label>
<div class="col-sm-10">
<textarea class="form-control entertonext" name="address" id="address" placeholder="Address" tabindex="4"></textarea>
<span id="msg6"></span>
</div>
</div>
<div class="form-group row" id="deposited">
<label for="default-input" class="col-sm-2 form-control-label">Bank Balance</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="balance" id="balance" placeholder="Bank Balance" tabindex="5">
<span id="msg6"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary entertonext" tabindex="6">Submit</button>
</div>
</div>
</form>
</div>

html required in form not working with issues in modal

I have a modal where i put my form inside. Now, my problem is, when i click the button of my onclick="regpatient()" button, the required will pop-up but when i look at it in console, the data was submited by a post because of my onlick function. How can i do this?
Here is my modal:
<div class="modal-body">
<form class="form-horizontal" id="frm_patientreg">
<div class="form-group">
<label class="control-label col-sm-3" for="pfname">First Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="pafname" name="pafname" placeholder="First name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pmname">Middle Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="pamname" name="pamname" placeholder="Middle name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="plname">Last Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="palname" name="palname" placeholder="Last name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="paddress">Address:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="paaddress" name="paaddress" placeholder="Address" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pcontact">Contact #:</label>
<div class="col-sm-7">
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" id="pacontact" name="pacontact" placeholder="Contact number" maxlength="11" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pbdate">Birthdate:</label>
<div class="col-sm-5">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="pabdate" name="pabdate" placeholder="Birthdate" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="page">Age:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paage" name="paage" placeholder="Age" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pheight">Height:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paheight" name="paheight" placeholder="Height (cm)" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pweight">Weight:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paweight" name="paweight" placeholder="Weight (kg)" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="psex">Sex:</label>
<div class="col-sm-5">
<select class="form-control" id="psex" name="psex">
<option value="0">--- SELECT OPTION ---</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pmartiastat">Civil Status:</label>
<div class="col-sm-5">
<select class="form-control" id="pmartialstat" name="pmartialstat">
<option value="0">--- SELECT OPTION ---</option>
<option value="Single">Single</option>
<option value="Living common law">Living common law</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Separated">Separated</option>
<option value="Divorced">Divorced</option>
</select>
</div>
</div>
</div><!-- modal-body -->
<div class="modal-footer">
<button value="submit" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
</form>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div><!-- modal-footer -->
</div><!-- modal-content -->
and here is my ajax where it fires when the button in footer of my modal is clicked:
function regpatient() {
var a = $('#psex').val();
var b = $('#pmartialstat').val();
if(a == "0" || b == "0") {
alert("Please select option");
}
else {
$.ajax({
url: siteurl+"sec_myclinic/addpatient",
type: "POST",
data: $('#frm_patientreg').serialize(),
dataType: "JSON",
success: function(data) {
alert("Successfully Added");
$('#frm_patientreg')[0].reset();
}
});
}
}

If I understand your problem right you want to stop the button's default submit action and only use your onclick script. Try this:
onclick="regpatient(event)"
and
function regpatient(event) {
event.preventDefault();
...
Edit
The required fields are not getting validated by the onclick function. Some checks like this for the required values should help stop the ajax call.
if (!$('#pafname').val()) {
return alert('Please fill in all required fields.');
}
// ajax code here ...

Use this
<button value="button" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
instead of this
<button value="submit" onclick="regpatient()" class="btn btn-primary">Register Patient</button>

Binding a dropdownList using knockout

I am new to knockout and MVC.
Am trying to bind knockout observable array to a dropdownlist.Here is the code I am using.
JS code
var Provider =
{
ProviderID: ko.observable(""),
FirstName: ko.observable(""),
LastName: ko.observable(""),
Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N"]),
Specialization: ko.observable(""),
TaxonomyCode:ko.observable(""),
SSN: ko.observable(""),
ContactNumber: ko.observable(""),
ContactEmail: ko.observable(""),
FacilityName: ko.observable(""),
}
ko.applyBindings(Provider);
Am trying to bind Certification field.
My HTML code is as follows
<head>
<title>CREATE PROVIDER</title>
</head>
<body>
<div class="container">
<h1 class="col-sm-offset-2">Enter Provider Details:</h1><br />
<form class="form-horizontal" role="form" id="ProviderDetailsForm">
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value: FirstName" onkeypress="return onlyAlphabets(event);">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">CERTIFICATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Certification" data-bind="value: Certification, optionsCaption: 'Select a Certification'">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Specialization" data-bind="value: Specialization">
<option>Select a Specialization</option>
<option>Doctor</option>
<option>Facility</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">TAXONOMY CODE:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Taxonomy code" id="TaxonomyCode" data-bind="value: TaxonomyCode" disabled="disabled">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">SSN:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Enter the SSN" id="SSN" data-bind="value: SSN" onkeypress="return onlyNumbers(event);" maxlength="9">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_SSN">Enter the SSN</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FACILITY NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data-bind="value: FacilityName" placeholder="Enter the Facility Name" id="FacilityName">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FacName">Enter the Facility name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data-bind="value: ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" onkeypress="return onlyNumbers(event);" maxlength="10">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">EMAIL ADDRESS:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data-bind="value: ContactEmail" placeholder="Enter your email address" id="EmailAddress">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
</div>
<div class="form-group">
<button type="submit" id="Submit" class="btn btn-primary col-sm-1 col-sm-offset-4">Submit</button>
<button type="reset" class="btn btn-primary col-sm-1">Reset</button>
</div>
</form>
</div>
<script type="text/javascript" src="../../Scripts/Create_Script.js"></script>
The other bindings seem to be working fine,But the dropdown list is not getting populated.New to this,So any guidance would be appreciated.

You need to have 2 properties for certification in your model - one to hold a list of available values, and one to hold the selected value. For example:
Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N"]),
SelectedCertification: ko.observable(""),
Then for your select element you can use binding as follows:
<select data-bind="options: Certification,
value: SelectedCertification,
optionsCaption: 'Choose a certification...'">
</select>