Angular text form with numbers only? - javascript

So I have an input form in Angular here:
<input ng-model="sc.zip" class="form-control" maxlength="5" type="text" />
I don't want type="numbers" because the form needs to be a plain empty textbox. However, I only want the user to be able to type numbers. Either I need to detect when the input is not a digit, or be able to search through the box to find non-digits when submitting.
Either way, I need to validate that the form is digits only. Any help would be appreciated!

use regex
<input name="title" type="text" ng-model="sc.zip" ng-pattern="/^[0-9]*$/" required/>

Related

Different title when input invalid and input empty

I have an input:
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required>
If I input a number, the title will appear. But if I don't input anything, it will give the same error title. How can the title when I input not only letters is different when I doesn't input anyhing?
I think that your problem is similar to the one in this link.
The correct answer there says that:
If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />
Here is a working example for your case to see:
<form>
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
<button type="submit">Submit</button>
</form>

Validate phone in jQuery

I have this input field that the user need to put his phone number:
<input type="text" id="Phone" />
I want to validate if the number is in the correct format.
The format should be this:
Only 10 digits (no letters, no "-" and no other characters)
Can someone help me please?
There is a plugin for this and it is called 'Jquery mask plugin'. Also there is another question about it here. Check them out.
You can use pattern attribute with RegExp \d{10} , maxlength set to 10, title set to the message to be displayed to user at invalid submission , placeholder set to display message indicating expected format of input
<form>
<input type="text"
pattern="\d{10}"
maxlength="10"
placeholder="Input 10 digits"
title="Input 10 digits" />
<input type="submit">
</form>

How to use Pattern Attribute on Textbox

I am trying to use Pattern attribute to do validation on text box.
When ever user entered any of these .....i want to show some validation message.
So i created that element as follows:
<input type="text" pattern="/(<!|&#|<\?|<|>)/" title="Required" required />
When ever i entered any text it is showing the alert...
How to get rid of this?
You were using the wrong pattern. In HTML patterns, you don't need an opening and closing delimiter. Also, the browser checks, if the entered text MATCHES the pattern, but you would need the exact opposite (if I understood it correctly). Try something like this:
<form>
<input type="text" pattern="^((?!(<)|(<!)|(<\?)|(&#)|(>)).)*$" title="Required" required />
<input type="submit" />
</form>

does jQuery Validation plugin not work with input type number? [duplicate]

I'm trying to setup a "digit" field using the jQuery Validation plugin
The problem is I don't want the digit field to be required, I just want to validate it as digits only, if someone does enter anything into it.
Here is my code, if I remove the "required: true," part, the field no longer throws up an error if I enter text into it and the form gets passed.
$('.js-validate-form').validate({
rules: {
phoneNumber: {
digits: true
}
}
});
And my HTML
<input type="number" name="phone" id="phone" placeholder="Phone (include area code)" value=""/>
Thanks in advance for any help!
This only seems to be a problem with input type="number" fields. It also only works as long as your field name matches your rule declaration, in this case, phoneNumber...
<input type="text" name="phoneNumber" id="phone" placeholder="Phone (include area code)" value=""/>
DEMO: http://jsfiddle.net/L4crh/
However, there are various phone number rules you can use that are already included in this plugin as part of the additional-methods.js file
DEMO 2: http://jsfiddle.net/L4crh/1/
EDIT:
The type="number" bug has reportedly been resolved as of jQuery Validate version 1.13.
https://github.com/jzaefferer/jquery-validation/releases/tag/1.13.0

Mobile Number Masking using Javascript?

I want to use masking for Mobile Number in javascript.In this masking, I want to fix (+91) then user can input mobile number(10 digit number)
<label>Phone Number</label>
<input type="button" value="Turn on Mask" id="maskon" />
<input id="phone" type="text" value="" />
$("#maskon").click(function(){
$("#phone").mask("(+91) 9999-999999");
});
If I am using the given masking then I am able to put any digit in place of 9 instead of it I want to have (+91) as fixed.
Is there any idea to solve this problem?
Thanks in Advance!!
I do not think that there is an option for making first few digits fixed for mask plugin.
However you could also write keyup event for textbox and write a regex that verifies that first three digits are +91. You can use this regex for that. /(\+\d{2})/

Categories

Resources