Develop Reference

issues with the html 5 pattern attribute

I am trying to make sure the input field pattern should work, but all i am getting is an error that format is wrong
<input type="text" id="Phone" name="Phone" maxlength="14" value="" class="required" required="" data-msg-required="Please enter the Telephone number." pattern="/^\(*\+*[1-9]{0,3}\)*-*[1-9]{0,3}[-. /]*\(*[2-9]\d{2}\)*[-. /]*\d{3}[-. /]*\d{4} *e*x*t*\.* *\d{0,4}$/" placeholder="(XXX) XXX-XXXX">
<input type="submit">
the number is automatically formatting to (xxx) xxx-xxxx
so what is wrong here
also i am trying to remove the message it displays if the value is invalid and add the red border to the input field
var cell = document.querySelector("input[name='cellphone']");
cell.addEventListener('invalid', (function () {
return function (e) {
e.preventDefault();
var ele = document.getElementById("cellphone");
$(ele).parents(".fui-form").addClass("fui-form-error");
};
})(), true);

If your goal is to just make sure that the input matches the pattern:
(XXX) XXX-XXXX, there are a couple things to take note of.
First of all, like Barmar said, when you use a regular expression in the pattern attribute of an HTML input element, that expression shouldn't be between forward slashes //.
Also, your regular expression is overly complicated. You can just do something like this:
// This javascript is just extra. Not important part.
const form = document.forms[0]
form.addEventListener('submit', e => {
e.preventDefault()
const { Phone: phone } = form.elements
// you could also do \s{1} for one space instead of a plain space if you want
console.log(phone.value, /\(\d{3}\)\s{1}\d{3}-\d{4}/.test(phone.value))
})
<form>
<input
type="text"
id="Phone"
name="Phone"
maxlength="14"
value=""
class="required"
required
data-msg-required="Please enter the Telephone number."
pattern="\(\d{3}\) \d{3}-\d{4}"
placeholder="(XXX) XXX-XXXX"
/>
<input type="submit">
</form>
Added a little extra JavaScript that will print the value of the input plus whether or not it matches the pattern. However, if you try adding any value inside the input that doesn't match the pattern, the form won't submit.
Let's go through each part of the regular expression:
I first escape these \(\), since I don't want to use them to capture a group. I want them to be part of the actual pattern
I want there to be exactly 3 numbers within those first parentheses. \d is shorthand for [0-9], and {3} means I want 3 of them.
There must be one space.
Then we require 3 numbers followed by a hyphen (-) followed by 4 numbers.
If you don't want the default error message to appear, and you want to do something else in case of an error, here's an option:
const form = document.forms[0]
const phone = form.elements.Phone
const regex = /\(\d{3}\) \d{3}-\d{4}/
form.addEventListener('submit', e => {
e.preventDefault()
console.log(phone.value, regex.test(phone.value))
})
phone.addEventListener('input', e => {
if (!regex.test(e.target.value)) {
if (!phone.classList.contains('error'))
phone.classList.add('error')
} else {
phone.classList.remove('error')
}
})
input[type='text'] {
outline: none;
border: none;
box-shadow: 0 0 1px rgb(0 0 0 / 15%);
}
input:not(:focus).error {
border: 2px solid red;
}
<form>
<input
type="text"
id="Phone"
name="Phone"
maxlength="14"
value=""
class="required"
required
data-msg-required="Please enter the Telephone number."
placeholder="(XXX) XXX-XXXX"
/>
<input type="submit">
</form>
I'm adding an event listener to the input which checks whether or not the user's input is valid after each new character typed. If the user leaves the input box (not focused), and the value of the input doesn't match our pattern, the input has a red border. If you're prefer some other behavior, you can just play with this code a little.

Textbox to accept value 100 and above

This is my textbox that I have:
This is the code for it :
<!-- Preferred credit limit -->
<div class="signup-card-section">
<h2 class="accordion-header boldtext">Tell Us Your Preferred Credit Limit</h2>
<div class="column-control no-padding twelve colgrid">
<fieldset>
<div class="row">
<p class="text-red">(Choose one)</p>
<p>My Preferred Credit Limit<span class="text-red">*</span></p>
<br>
<input type="radio" name="prefcreditlimit" checked="checked" value="yesprefcreditlimit" id="yesprefcreditlimit">
<span class="radiotextdeco">S$</span> <input type="text" class="input numeric-only nodecimal width30" name="prefcreditlimitval" id="prefcreditlimit" min="100"> <span style="font-size:12px;"> (Must be in multiples of 00’ and a minimum of S$100)</span><br><br>
<input type="radio" name="prefcreditlimit" checked="checked" value="noprefcreditlimit"> <span class="radiotextdeco">I dont have a preferred credit limit and agree to any credit limit determined</span><br><br>
<p><strong>Note:</strong> Principal applicant and Suplementary applicant will be granted the preferred credit limit of any limit determined by the bank, whichever is lower.</p>
</div>
</fieldset>
</div>
</div>
Error message to appear if value key in is not in multiples of 00’ or minimum of S$100: “Your Preferred Credit Limit must be in multiple of 00’ and a minimum of S$100.
Since I set the min value to 100. There's an error message appear when user enters less 100. The problem is now, I'm not sure how to check for the validation of 00'
Any help would be appreciated.

Use <input type="number"> along with the min and step attributes:
<input type="number" name="prefcreditlimitval" min="100" step="100">
If the user enters a value lower than the min or something that isn't a multiple of step, the browser's validation will prevent the form from being submitted. In browsers that don't support validation, you can use a polyfill (like this one).
You can test out the validation (though SO doesn't allow forms to run):
input:invalid {
border-color: red;
}
Input multiples of 100<br><br>
<input type="number" name="test" min="100" step="100">

Input tag also has 'pattern' attribute, where you can specify Regex pattern to check input.
So something like
<input type="text" class="input numeric-only nodecimal width30" name="prefcreditlimitval" id="prefcreditlimit" min="100" pattern="\d+00$">
should work!
Some info about input's pattern attr

As mentioned in other answers, you may use min and step attributes to limit value of input field. But these attributes were introduced as a part of HTML 5 standards and it is not supported in all browsers yet.
A generic solution using jQuery/JS to check input value and give error message if it does not meet your requirements can be written as follows.
function validate() {
var value = $("#prefcreditlimit").val();
if (isNaN(value) || value < 100 || value % 100 != 0) {
alert("Please provide a valid input");
$("#prefcreditlimit").val("");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="radiotextdeco">S$</span>
<input type="text" class="input numeric-only nodecimal width30" name="prefcreditlimitval" id="prefcreditlimit" min="100" onblur="validate()"> <span style="font-size:12px;"> (Must be in multiples of 00’ and a minimum of S$100)</span>

You could add some validation in Javascript, checking whether the input is indeed a number, if so then check if it's also at least 100 and if so, check if the input is a multitude of 100. You can do it like this:
var val = parseInt($("#prefcreditlimit").val(), 10);
if (isNaN(val))
{
// ERROR; NOT A NUMBER
}
else if (val < 100)
{
// ERROR; VALUE IS LOWER THAN 100
}
else if (val % 100 !== 0)
{
// ERROR; VALUE IS NOT A MULTITUDE OF 100
}

It seems you want the value to be greater than 100 and a multiple of 100. Seeing as you have tagged the question with jQuery I have done a jQuery example for you.
I am listening for changes on the textfield using .change().
jQuery("#prefcreditlimit").change(function () { ... });
I am using jQuery(this).val(); or jQuery("#prefcreditlimit").val(); to get the current value of the textfield .val()
From your comments, I have updated to first check that the radio button is checked first using !jQuery("#yesprefcreditlimit").is(':checked') which says if the checkbox is not checked.
Then I use simple logic checks first checking if the value is a number isNaN(value) then if value < 100 is less than 100. Then if value % 100 > 0 if the modulus of the value is greater than 100.
There definitely a lot more you could go here, and a lot of different ways you could do this, this is just one way. For example you might not want the change part of this and instead do the validation on the submit of the form.
Note: In the stack snippet you need to click out of the textbox for the change event to be triggered.
jQuery(function () {
jQuery("#prefcreditlimit").change(function () {
var value = jQuery(this).val();
if(!jQuery("#yesprefcreditlimit").is(':checked')) {
jQuery("#warning").text("");
return;
}
if(isNaN(value)) {
jQuery("#warning").text("Value is not a number.");
return;
}
if(value < 100) {
jQuery("#warning").text("Value is less than 100");
return;
}
if(value % 100 > 0) {
jQuery("#warning").text("Value needs to be a multiple of 100");
return;
}
jQuery("#warning").text("Value: " + value + " is Okay!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>My Preferred Credit Limit<span class="text-red">*</span></p>
<br>
<input type="radio" name="prefcreditlimit" checked="checked" value="yesprefcreditlimit" id="yesprefcreditlimit">
<span class="radiotextdeco">S$</span> <input type="text" name="prefcreditlimitval" id="prefcreditlimit" min="100"> <span style="font-size:12px;"> (Must be in multiples of 00’ and a minimum of S$100)</span><br><br>
<input type="radio" name="prefcreditlimit" checked="checked" value="noprefcreditlimit"> <span class="radiotextdeco">I dont have a preferred credit limit and agree to any credit limit determined</span><br><br>
<p id="warning"></p>

If you have no problem using input type number you can use, step attribute
step = "any" or positive floating-point number NEW specifies the value granularity of the element’s value.
If step is not explicitly included, the value of step defaults to 1, as if it were included with step="1" (or step="100" in the case of type="time"), even if the default value or min value is a float.
<input type="number" class="input numeric-only nodecimal width30" name="prefcreditlimitval" id="prefcreditlimit" min="100" step="100">

Input element that allowes only number with decimals, with AngularJS

I'm trying to create an input element that:
Holds a number (string or actual number doesn't matter).
You shall not be able to enter anything else but numbers and a dot(.).
You are allowed to enter two decimals.
If no decimals are entered, two decimals (i.e. .00) shall be added to the number when leaving the input element (on-blur).
I'm working with AngularJS (1.2) and watch $valid and $invalid on the containing form.
The input is valid when the value is a number with two decimals and the value is larger than 0.
I have tried to use:
<input ng-model="price" type="number" ng-blur="addDecimals()"/>
$scope.addDecimals = function(){
$scope.price = $scope.price.toFixed(2);
}
But then I can't add zeroes as decimals (.00). As toFixed() returns a string, the value is not allowed in the input and it becomes empty.
I have also tried to use
<input type="text" ng-model="price" ng-blur="addDecimals()" ng-change="changed()" />
$scope.changed = function(){
// removes all charachters but numbers and one dot (.);
// examples:
// if value is '1a.t9' it will be changed to '1.9'
// if value is 'qwe' it will be changed to ''
// if value is 4 it will not be changed.
$scope.price = removeAllCharsButNumbersAndDot($scope.price);
}
$scope.addDecimals = function(){
if(parseFloat($scope.price) > 0)
$scope.price = $scope.price.toFixed(2);
else
$scope.price = "";
}
With this solution [form].$valid will be set to true if the value '0' is entered. [form].$valid will be set to false only when the user leaves the input element (on-blur) which is kind of ugly.
I have tried to use ng-pattern="/^\s*(?=.[1-9])\d(?:.\d{1,2})?\s*$/", but then ng-change will not fire.

You can use https://github.com/angular-ui/ui-validate. Ui-validate is great for this. Example:
<input type="number" ng-model="priceModel" ui-validate=" 'checkPriceModel($value)' ">
//Controller:
$scope.checkPriceModel = function(value){
return value <= 0;
}

<form name="theForm" id="theForm">
<input ng-change="changed()" id="priceId" type="number" min="1" name="priceName" ng-model="priceModel" required />
</form>
is the easiest (without extra modules)

If i am getting it right, you can try following
<form name="appTest">
<div
ng-class="{ 'has-error': appTest.app.$touched && appTest.app.$invalid }">
<input type="text" ng-model="vm.text" name="app" ng-pattern={define your pattern}>
</select>
</div>
If its invalid, 'has-error' class will get applied.

You don't need ng-change for this. You can just rewrite your html like this.
<form name="theForm" id="theForm">
<input id="priceId" type="number"
name="priceName" ng-model="priceModel" required min="0" />
<span class="error" ng-show="theForm.priceName.$error.number">
Not valid number!
</span>
</form>
You can read more about it here: https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

Minimal length in textarea validation

I have a problem with my script.
It is only partly working. If i enter less then 15 charachters the alert appears but then i click ok on the alert massage and the from gets send anyway. I am not sure waht i'm doing wrong. Here is my script:
function checktextarea() {
var minLength = 15;
var $textarea = $('#massage');
if($textarea.text().split(/\s+/).length < minLength) {
alert('You need to enter at least ' + minLength + ' words');
return false;
}
}
This is the html:
<form action="kontaktsi.php" name="myForm" id="myForm" method="post" class="contact_form" onsubmit="checktextarea()">
<span class="sporo">
<input type="text" id="fname" name="fname" class="contacttextform form-control" placeholder="Name" required>
</span>
<input type="email" id="email" name="email" class="contacttextform" placeholder="Your email" required><br><br>
<textarea name="message" id="message" cols="8" rows="8" class="contacttextarea" placeholder="text text text?" required></textarea>
<br>
<div class="send">
<input name="send" type="submit" class="contactformbutton" style="width:150px;" value="Send">
</div>
</form>

change your <form> tag into this:
<form action="kontaktsi.php" ... method="post" onsubmit="return checktextarea()">
You need to add return to the call, in order to pass the boolean value false to the submit event.
There's also a typo in your script: change $('#massage') into $('#message')
Finally, you need to use val() instead of text() to get the value of a <textarea>.
Here's the final script:
function checktextarea() {
var minLength = 15;
var textarea = $('#message');
if(textarea.val().replace(' ') < minLength) {
alert('You need to enter at least ' + minLength + ' words');
return false;
}
return true;
}

I am not 100% sure if it is the only way, but the last time I solved this problem I avoided the generic onsubmit mechanism; precisely because of the missing way of breaking in case of error.
Instead, one can bind a jQuery submit event and then use preventDefault() in case of error, as described here:
http://api.jquery.com/submit/
One can even submit directly with jQuery: Submit a form using jQuery
It is slightly more work, but you have much better control.

try this
function checktextarea() {
var minLength = 15;
var $textarea = $('#massage');
if($textarea.val().split(' ').length < minLength) {
alert('You need to enter at least ' + minLength + ' words');
return false;
}
}

Validating an HTML form with onClick added form fields

I have a form I cobbled together with bits of code copied online so my HTML and Javascript knowledge is VERY basic. The form has a button that will add another set of the same form fields when clicked. I added some code to make it so that if the "Quantity and Description" field is not filled out, the form won't submit but now it just keeps popping up the alert for when the field's not filled out even if it is. Here's is my script:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'>
</script><script type='text/javascript'>
//<![CDATA[
$(function(){
$('#add').click(function() {
var p = $(this).closest('p');
$(p).before('<p> Quantity & Description:<br><textarea name="Quantity and Description" rows="10"
cols="60"><\/textarea><br>Fabric Source: <input type="text" name="Fabric Source"><br>Style# & Name: <input
type="text" name="Style# & Name"><br>Fabric Width: <input type="text" name="Fabric Width"><br>Repeat Information:
<input type="text" name="Repeat Info" size="60"><input type="hidden" name="COM Required" /> </p><br>');
return false;
});
});
function checkform()
{
var x=document.forms["comform"]["Quantity and Description"].value
if (x==null || x=="")
{
alert("Quantity & Description must be filled out, DO NOT just put an SO#!!");
return false;
}
}
//]]>
</script>
And here's my HTML:
<form action="MAILTO:ayeh#janusetcie.com" method="post" enctype="text/plain" id="comform" onSubmit="return
checkform()">
<div>Please complete this worksheet in full to avoid any delays.<br />
<br />Date: <input type="text" name="Date" /> Sales Rep: <input type="text" name="Sales Rep" /> Sales Quote/Order#: <input type="text" name="SQ/SO#" /><br />
<br />Quantity & Description: <font color="red"><i>Use "(#) Cushion Name" format.</i></font><br />
<textarea name="Quantity and Description" rows="10" cols="60">
</textarea>
<br />Fabric Source: <input type="text" name="Fabric Source" /><br />Style# & Name: <input type="text" name="Style# & Name" /><br />Fabric Width: <input type="text" name="Fabric Width" /><br />Repeat Information: <input type="text" name="Repeat Info" size="60" /><br /><font color="red"><i>Example: 13.75" Horizontal Repeat</i></font><br />
<br /><input type="hidden" name="COM Required" />
<p><button type="button" id="add">Add COM</button></p>
</div>
<input type="submit" value="Send" /></form>
How can I get it to submit but still check every occurence of the "Quantity and Description" field?

First, I would not use spaces in your input names, as then you have to deal with weird escaping issues. Use something like "QuantityAndDescription" instead.
Also, it looks like you're trying to have multiple fields with the same name. The best way to do that is to add brackets to the name, meaning the values will be grouped together as an array:
<textarea name="QuantityAndDescription[]"></textarea>
This also means the code has to get all the textareas, not just the first. We can use jQuery to grab the elements we want, to loop over them, and to check the values. Try this:
function checkform()
{
var success = true;
// Find the textareas inside id of "comform", store in jQuery object
var $textareas = $("form#comform textarea[name='QuantityAndDescription[]']");
// Loop through textareas and look for empty values
$textareas.each(function(n, element)
{
// Make a new jQuery object for the textarea we're looking at
var $textarea = $(element);
// Check value (an empty string will evaluate to false)
if( ! $textarea.val() )
{
success = false;
return false; // break out of the loop, one empty field is all we need
}
});
if(!success)
{
alert("Quantity & Description must be filled out, DO NOT just put an SO#!!");
return false;
}
// Explicitly return true, to make sure the form still submits
return true;
}
Also, a sidenote of pure aesthetics: You no longer need to use the CDATA comment hack. That's a holdover from the old XHTML days to prevent strict XML parsers from breaking. Unless you're using an XHTML Strict Doctype (and you shouldn't), you definitely don't need it.