Develop Reference

Protractor: Unable to pass text into text box

I must be missing something very obvious with this but when I try to pass text into an input field, the script doesn't fail but it also isn't entering text into the text field. If it makes any difference, the text field will only accept numbers.
This is the html
<input type="number" class="form-control au-target form-control-warning" value.bind="bidAmount & debounce:500 & validate" au-target-id="126" placeholder="Enter Amount">
This is how I try it on my page object file
var amount = 60;
return element(by.valueBind('bidAmount & debounce:500 & validate"')).clear().sendKeys(amount);
I've also tried by.cssContainingText() and by.css() but neither are working

You can try,
$("input[placeholder='Enter Amount']").clear().sendKeys('hello');
or more explicit
element(by.css("input[placeholder='Enter Amount']")).clear().sendKeys('hello');

Do you get it with :
$('input[type="number"][class="form-control au-target form-control-warning"]').clear().sendKeys(amount);

jquery form validation allow only standard USA numbers

I found this plugin good so far Jquery Form Validator as so far it has fulfilled all my requirements but i am stuck to set validation for the users to enter only USA mobile number format something like this 1-(XXX)-XXX-XXXX . It should allow only this number to enter else it should not accept and should show form validation error.
I have researched but unable to find any tutorial or demo code which is showing how to achieve this particular thing and hence i had to put this question.
Can someone guide me or show me some code if possible how to achieve this using data-* attributes in html tags (i.e. <input data-validation="creditcard" data-validation-allowing="visa, mastercard, amex">) or any other way with the help of utilizing this plugin..
I am trying to utilize this Configuration Callbacks but i am bit confused how to utilize this as i have multiple forms and i have only put this code in my common.js file for all the forms which works well using for all the forms.
$.validate({
modules : 'security, file'
});
So i want something like common data-* attribute (if its available) which can work in a parcular html form which can be feasible for me as i do not need to type different code based on different form like this $.validate({form : '#LoginForm'}); as above common method will be feasible for me ..
Can someone help me to achieve this thing please ?
Any help will be highly appreciated.
Thanks.

Eventually I have sorted out this thing with ease thanks to #mplungjan who provided me a link and shown me a way how to accomplish this.
I simply went here to the library Default validation custom and I see they actually are providing the facility to make regex validation on the go ..
I searched regex to check US mobile numbers Phone Number Regex US
And then after finding a regex to work with, I used this HTML code,
<input name="user_mobile_no" class="form-control error" placeholder="Mobile No."
data-validation="required custom"
data-validation-error-msg-required="Please Enter Mobile Number"
data-validation-regexp="\D*([2-9]\d{2})(\D*)([2-9]\d{2})(\D*)(\d{4})\D*"
data-validation-error-msg-custom="Invalid Mobile Number (i.e. +1 XXX-XXX-XXXX)"
maxlength="50" id="user-mobile-no" value="+1 215-555-1212"
style="border-color: rgb(185, 74, 72);" type="text">
And voila, its working.
Notice these lines I have put above, data-validation="required custom" custom is required to put there to make custom validation.
Then after I put
data-validation-regexp="\D*([2-9]\d{2})(\D*)([2-9]\d{2})(\D*)(\d{4})\D*"
which checks valid phone numbers and last but not the least, i have put two different validation error messages to show to the users for required data-validation-error-msg-required="Please Enter Mobile Number" and invalid number data-validation-error-msg-custom="Invalid Mobile Number (i.e. +1 XXX-XXX-XXXX)" .
Thanks guys for support. I hope it helps someone who needs to deal with similar thing. Really appreciated.
Thank you.

/*
It works for these number formats:
1-234-567-8901
1-234-567-8901 x1234
1-234-567-8901 ext1234
1 (234) 567-8901
1.234.567.8901
1/234/567/8901
12345678901
1-234-567-8901 ext. 1234
(+351) 282 433 5050
*/
jQuery.validator.addMethod("usPhoneFormat", function (value, element) {
return this.optional(element) || /^\(*\+*[1-9]{0,3}\)*-*[1-9]{0,3}[-. /]*\(*[2-9]\d{2}\)*[-. /]*\d{3}[-. /]*\d{4} *e*x*t*\.* *\d{0,4}$/.test(value);
}, "Enter a valid phone number.");
$(document).ready(function(){
$("#sampleForm").validate({
rules: {
phoneNumberRegEx: {
usPhoneFormat: true,
required: true
}
},
submitHandler: function (form) {
alert("submitted.");
}
});
$(".phone").mask("0-000-000-0000", {placeholder: "_-___-___-____"});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<form id="sampleForm" method="POST">
<fieldset>
<label for="phoneNumberRegEx">Phone: </label>
<input type="text" id="phoneNumberRegEx" name="phoneNumberRegEx" class="phone" />
</fieldset>
<input type="submit" value="Submit" />
</form>

If u wanna have advanced validation with specific series codes, u can try to use data from this package https://www.npmjs.com/package/dialcodes

two way data binding with Angular 1

Basically what my problem is that I have a input field and text area like so:
<input type="text" placeholder="Your URL*" id="userURL" ng-model = "usermodel"/><br />
<textarea id="final">{{usermodel}}</textarea><br />
So my problem is that text will be manipulated via controller, and I want the user to be able to type into the field WITHOUT the textarea refreshing.
For example:
controller: {
textareaoutoutput = "hi ..... How are you";}
textarea: hi {{usermodel}} how are you? <br>
input field: john
BUT when I type into the field, "Hi how are you" gets removed, and only the text field input is shown. I would like it so that the "Hi how are you" is fixed and will not change while the user can enter and still see it add instantly.
I hope that makes sense

inside controller :
$scope.textVal = " hi "+ $scope.usermodel + " how are you?"
<textarea id="final">{{textVal}}</textarea><br />
I hope you can understand it always try to function for the manipulate string
or
<textarea id="final">Hi {{usermodel}} how are you!</textarea><br />

hm, I am not sure if this will work.
the controller is going to output text to the text area, but I want the angular expression tags {{x}} to be in the middle of the the document will be outputting
Maybe this example will be better
textarea:
TEXTA + {{angular expression}} + TEXTB
is it possible to output data to text a and text b and have a user still add something to the {{x}} without refreshing the textarea

Custom input mask in HTML

I want to generate an input type of text with custom mask like --day/--night and user replace - just with numbers. any suggestion? Please help me out here.
duration: --day/--night

Using two inputs is much more efficient.
But if you really want to do this, yes you can do it. You would need to check the input value every time user inputs a character and format the value to what you would like. You can also manipulate the cursor position using selectionStart and selectionEnd properties.
There are also a number of mask plugins for inputs.
http://plugins.jquery.com/tag/mask/

You can do following:
Make a placeholder "--" where the user can write the things in. Here is a short example what I mean:
duration: <input placeholder="--" maxlength="2">day/<input placeholder="--" maxlength="2">night

Telerik offer a free version of their "Kendo UI" JavaScript code. Here's an example of what you want: http://demos.telerik.com/kendo-ui/maskedtextbox/index
Here's the free code: http://www.telerik.com/download/kendo-ui-core
Here's their masked input code hosted on Github: https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.maskedtextbox.js

It is very hard to write this type of code but you can use this code for this type of formatting.
<div>
<label for="phone">Phone</label>
<!-- or set via JS -->
<input id="phone" type="text" />
</div>
jquery code
$(":input").inputmask();
$("#phone").inputmask({"mask": "99/99"});
see the codepen link click here

clear value in an input field with jQuery

Hi I have a number of inputs for telephone numbers, they use the same class and the same show/hide techinque.
I want to be able to clear the contents of the phone number in the input box, i.e. with the class name of input_tel.
However it seems to clear all inputs which I assume is because I am using the following line; input:text , when I put in a class it just fails to work.
My JS and some of my html is below or view a jsFiddle:
$(".contact_numbers").on('click', '.clearnumber', function () {
$(this).siblings('input:text').val('');
});
<div class="telephonetwo contact_numbers">
<input type="text" class="smallinput contactpagelabel" name="faxname" size="10" value="Fax">
<input type="checkbox" class="contact_no" name="showfax" value="Y">
<input type="text" name="fax" size="30" value="016128 13456" class="input_tel">
Hide Clear #
</div>
If you are viewing my JSfiddle click the reveal additional numbers for the clear button to appear.
Update
I want to be able to clear the closest input_tel rather than all of them, as their are multiple numbers.
Thanks in advance

replace:
$(this).siblings('input:text').val('');
with
$(this).siblings('input:text').closest('.input_tel').val('');
JSFIDDLE DEMO

How about targeting the input_tel class then?
$(".contact_numbers").on('click', '.clearnumber', function () {
$(this).parent().parent().find('input.input_tel').val('');
});
Assuming no other input fields have that input_tel class on them.

This should do it...
$(".contact_numbers").on('click', function () {
$(".input_tel").val('');
});

The safe way to clear input fields with jquery
$.fn.noText = function() {/*use the jquery prototype technology to make a chainable clear field method*/
if(this.is('input')){ /*check to c if you the element type is an input*/
this.val('');/*clear the input field*/
}return this;/*means it is chainable*/
};
$('input').noText();