Develop Reference

Form Validation with Bootstrap 4 beta

I'm having a problem with understanding the building validation forms. In bootstrap current documentation there is a piece of JS code (so called starter code):
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
and it works fine but what should I do if i want to implement password check, for example? If i inderstand it right Bootstrap has css classes :valid and :invalid which run when the field is empty. I want to fire them when some condition is the (ie password less than 8 symbols).
<form id="needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword1">Password</label>
<input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password" required>
<div class="invalid-feedback">
Please provide a valid password.
</div>
</div>
</form>

You could use the pattern attribute. From MDN:
pattern
A regular expression that the control's value is checked
against. The pattern must match the entire value, not just some
subset. Use the title attribute to describe the pattern to help the
user. This attribute applies when the value of the type attribute is
text, search, tel, url, email, or password, otherwise it is ignored.
The regular expression language is the same as JavaScript RegExp
algorithm, with the 'u' parameter that makes it treat the pattern as a
sequence of unicode code points. The pattern is not surrounded by
forward slashes.
For example, the following will validate that the password is at least 8 characters with upper case, lower case and numbers:
<form id="needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword1">Password</label>
<input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
required>
<div class="invalid-feedback">
Passwords should be a minimum of 8 characters and include at least one upper case letter, one lower case letter and one number.
</div>
</div>
</form>

HTML input pattern not working validation

I have very strange issue.
in a very sample search form with one input field:
<input pattern="\S.{3,}" name="text"/>
The validation fails for value dds sdsd, but JS says it's Ok.
/\S.{3,}/.test(' dds sdsd')
true
/\S.{3,}/.test(' ')
false
Maybe I am missing something small or pattern is wrong, but according to regex.com it should be valid.
The idea is to prevent submit empty spaces. I am searching for a solution without write JS code.
<form method="GET" action="/">
<input class="form-control" name="text" type="text" pattern="\S.{3,}" />
<input type="submit" value="search" >
</form>

The HTML5 pattern is anchored by default, ^(?: and )$ are added at the start/end of the pattern when it is passed JS regex engine.
You need to use
<input pattern=".*\S.{3,}.*" name="text"/>
to make it work the same way as in JS with RegExp#test.
However, to require at least 1 non-whitespace char in the input, I'd recommend using
<input pattern="\s*\S.*" name="text"/>
See this regex demo. It will match 0+ whitespace chars at the start of the string (\s*), then will match any non-whitespace char (\S) and then will grab any 0+ chars greedily up to the end of the input.
<form method="GET" action="/">
<input class="form-control" name="text" type="text" pattern="\s*\S.*" title="No whitespace-only input allowed."/>
<input type="submit" value="search" >
</form>

Validation for numbers and special character '_'

I am having a text box to enter value for session creation. I need to make restrictions for not allowing any kind of alphabets and special characters. As I need to enter value such as '2016_2017' and not anything else apart from this.
How can I validate for alphabets and any other special characters. Please Help.

Please check this link, here is your solution
<form action="">
Country code: <input type="text" name="country_code"
pattern="[0-9]+_[0-9]+" title="enter valid code">
<input type="submit">
</form>
https://jsfiddle.net/shailesh_cool8/2xLubp4o/

Please refer to the below code
$name = "2016_2017";
if(preg_match("/(\d+)_(\d+)$/",$name)){
echo "Matched";
}
else{
echo "Not matched";
}

regular expresstion to match [/ , .] in ng-pattern

I am trying to create a expression so that input string must not contain forward slash, comma or a dot.
<form name="myForm">
<div class="col-sm-4">
<input class="form-control"
type="text"
data-ng-model="model_name"
name="modelName"
ng-pattern="/^[\/,.]/" required>
<div ng-messages="myForm.$submitted && myForm.modelName.$error" role="alert">
<div class="alert alert-danger" ng-message="pattern">Special characters [/ , .] are not allowed.</div>
<div class="alert alert-danger" ng-message="required">This field is required.</div>
</div>
</div>
</form>
The regular expression /^[\/,.]/ properly matches all the characters inside the square brackets but the problem is that it is not allowing me to input normal strings such as abc or abc_def or any other strings. I don't have deep knowledge of regex and I am not getting any idea how to solve this problem. Please help.

Your regex is wrong, ^ must be inside [] in order to match all characters except /., put them in a [^/.,], in regex, when using ^ inside a block [] will match anything but what is inside the [].
When testing regex, this web it useful: http://www.regexpal.com/

Regular expression doesn't act as expected

I use a regular expression to validate some form inputs with angularjs. I use the ng-pattern for that.
<input type="text" ng-pattern="/^([A-z]){3}$/">
<button type="submit" ng-disabled="demoForm.$invalid">Ok</button>
If i type anything not matching the expression it is not valid (as expected). If i type what is matching the pattern it will be valid (as expected).
But it doesn't work as expected at all. If i type nothing (empty text input) the form is valid, and that is what i want to avoid: It shouldn't be valid.
Any suggestions?

You'll need to give the input an ng-model attribute for Angular form validation to recognize it. You may also want to give the input a name attribute for more control. See Angular Input documentation.
This example should demonstrate how ng-model and name can be used for form validation. Note that I've also adjusted your regex and made the input required.
var myApp = angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="demoForm">
<input type="text"
ng-model="myValue"
name="myInput"
ng-pattern="/^[A-Za-z]{3}$/"
required />
<button type="submit" ng-disabled="demoForm.$invalid">Ok</button>
<div>Input valid? {{demoForm.myInput.$valid}}</div>
<div>Form valid? {{demoForm.$valid}}</div>
<div>Model value: {{myValue}}</div>
</form>
</div>