I want to validate that a client add any value into an input but can't add only white spaces. The client can put numbers, letters or characters and also white spaces between words.
<input class="form-control"
name="description"
placeholder="Add your description"
ng-model="$ctrl.description"
pattern="^[\\S]([\\wéáíóúñÑ,.:-¿?!() ])+$"
required>
What can I put in the pattern to validate that in html code?.
For basic html5 validation, use the following snippet. Note, title will be displayed as the error description to the end user.
<input class="form-control"
name="description"
placeholder="Add your description"
ng-model="$ctrl.description"
pattern=".*\S+.*"
title="Description is required"
type="text"
required>
pattern=".*\S.*"?Edited Answer:
You could simply use the regex [\w,./_=?-]+.
Regex explanation with breakdown:
+ Quantifier — Matches between one and unlimited times, as many times as possible, giving back as needed (greedy)
\w matches any word character (equal to [a-zA-Z0-9_])
,. matches a single character in the list ,.
/ matches the character / literally
_=?- matches a single character in the list _=?-
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope',
function($scope) {
$scope.checkSpace = function(event) {
if (event.keyCode === 32 && typeof $scope.inputBox === 'undefined') {
event.preventDefault();
}
};
}
]);.ng-invalid {
border: 1px solid red;
}
.ng-valid {
border: 1px solid green;
}
input:focus {
outline: none;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<input class="form-control" name="description" placeholder="Add your description" ng-model="inputBox" ng-keydown="checkSpace($event)" pattern="[\w,./_=?-]+" required>
</div>
</body>
</html>Notice that ng-invalid class will be added to the element if its value has only space(s).
