Titanium Ipad: How to restrict the textbox to allow specific format - javascript

I am new to Titanium. I am developing an ipap app using titanium. My app needs a textbox that allow only 1234AA or 1234 AA format.(AA/aa). i want to display a message under textbox "Invalid format: 1234 AA" while entering text in texbox.it should disappear after correct format is entered. I searched on google but i didn't find anything.
how to write the code for this?
Thanks!
I tried in another way that: I added a eventlistener 'click' to a button with code
submit.addeventlistener('click',function(){
pattern="[0-9]{4}\s?[A-Za-z]{2}";
var textfieldvalue=textfield.value;
if(!textfieldvalue.match(pattern))
{
var errorlabel=Ti.UI.createlabel({color:'black',text:'Invalid format:
1234AB'...});
win.add(error);
}
else{
//opening other window
}
});
its working but text box allowing more than 4 digits and more than 2 char (I given exact number in pattern)..what's wrong in my pattern?
Still I want this code for textfield (showing error message while typing in textfield until correct format is entered ) what event i have to use for textfield?

You can set "pattern" (regex) to the input field. In this case it'd be something like pattern="[0-9Aa]{4}\s?[0-9Aa]{2}".
Then you must set oninvalid event listener to the input field. This will fire when pattern match is not met. e.g oninvalid="showInvalidFormatMsg()" or preferrably fieldElem.addEventListener("invalid", showInvalidFormatMsg);
After this you can either use built-in tooltip with setCustomValidity function or just display as a text in DOM in that showInvalidFormatMsg
I'm unable to write working code atm. But if you're unable to follow these instructions and no-one has answered with full code, I try to find some free spot to help you with this.

Related

Show error when user types decimal character in KendoNumericTextbox

Using KendoUI for jQuery.
A new requirement has lead us to changing a KendoNumericTextbox from it's default settings to show only the integer value, as well as, alert the user in case they tried to input the decimal character. I see that Kendo shows a (!) element for a brief second when a user inputs a decimal character currently, but we need something that notifies them that decimals aren't allowed.
Currently validation checks if the input ranges from 0 to 100 with format: n0 and decimals: 0.
Since you are using kendo for jquery. You can just access it like a normal input and check if the user is typing in a decimal.. I wrote some code for you to try. This is from the kendo example on NumericTextBox.
$( "#currency" ).keyup(function() {
if ($(this).val().indexOf('.')!=-1)
{
alert('don't type decimals')
}
});
And the link to the kendo dojo where I edited the code for the first textbox. Hope this is helpful
https://dojo.telerik.com/OXiBEKIw/2

How to remove text from textarea using backspace in nightwatch.js

I am working on nightwatch.js, i want to update existing data so i need to remove old date and need to set new data, i tried two way to get my result.
1) set empty text using following nightwatch function.
browser.setValue('.MyClass', 'text',' ');
2) here i tried to use backspace but unfortunately nightwatch.js api documentation is not so good, so i tried following with the help of this link but not worked.
client.keys([client.Keys.COMMAND, "Backspace", client.Keys.NULL]);
above code not pressed mouse backspace but append 'Backspace'.
If you have any best idea, please let me know.
You can use .clearValue('selector') now :
http://nightwatchjs.org/api/clearValue.html
Check the nightwatch api for setValue
http://nightwatchjs.org/api#setValue
browser.setValue('input[type=text]', 'nightwatch');
Check the class you are entering, i guess somehow nightwatch is not able to find your element.
What follows is not optimal, I am sure. Either of the following lines of code will work for removing the last character of the string currently in the input field. It's just setting a backspace; sometimes that's what's works.
.useXpath().setValue(selector, "\u0008")
.useCss().setValue(selector, "\u0008")
If you get the string in the input field, then get the length of the string you can sent this command that many times to remove the text in the input field. I'm not including it here as a suggestion, more as a workaround.

Validating text input - bug in implementation

I've encountered a user interface issue with validation I really want to solve. For the website: http://fun-booths.co.uk/dev/
I'm using this simple plugin for validation: http://www.formvalidator.net/
The simple code behind this is as follows:
$.validate({
form : '#fscf_form1, #fscf_form2',
validateOnBlur : true,
scrollToTopOnError : false
});
The validateOnBlur property makes sure validation occurs when inputs loose focus.
There is a form in the right hand sidebar. When selecting a date and time the validation is not functioning correctly.
Fill out the town/city and postcode fields with the correct test data format for example. You will notice a green tick dynamically appear. Now for the date and time fields an end user does not actually type, the input is given to the form field by clicking on the responsive time picker / date picker respectively.
After selecting a date and time and focusing on other input elements this results in the following issue (even though a value has been selected a red cross is presented in the form field which is not desired behaviour.):
I believe this issue is stemming from the fact that the user does not actually enter text into the time or date fields. So the validation does not detect that actual text has been entered into the form.
Note: A strange behaviour is that a green tick does appear on the date/time fields if a value is chosen, then the same input is selected/given focus again.
Is there a JavaScript/jQuery solution that could fire with an event listener to solve this issue and ensure a green tick appears? Or would textual input need to physically be typed in to the date/time fields.
Try this hack, should work :
$('.picker__input').on('change', function(){
$(this).focus();
})
Hope this helps.
You are doing two plugins to work together. Try to give a callback to pickadate asking to reprocess the field:
$('#fscf_field2_12').pickadate({
//... add this parameter
onClose: function() {
$('#fscf_field2_12').blur();
},
//... or this one
onSet: function() {
$('#fscf_field2_12').blur()
}
})
You can also check the validateOnEvent method from jQuery-Form-Validator.

How to use International place Value System on HTML TextBox

I'm working on a web app. This app has a text box. The user will enter a dollar value into the text box. As the user is typing, I would like to include commas when appropriate. In others, if a user enters "100", the text will appear as entered. However, if the user enters "1000", I would like to automatically convert the text in the text box to show "1,000".
Is there a plugin to help with this? I'm having problems finding one. I'm using Bootstrap.
Thanks!
Hope The below Code will help you
var x=123456524578;
x=x.toString();
var res = x.replace(/\B(?=(\d{3})+(?!\d))/g, ",") ;
alert(res);
follow the below Link
Working Fiddle
now Append the above output to your Textbox or wherever you want.
the logic lies above,how to use the INTERNATIONAL PLACE VALUE SYSTEM

Validating a text box value using JavaScript

I have a textbox.T he user will be entering entering a number in this box. The user should enter two digits followed by a period "." and another digit. It would look something like 22.3 or 00.5 or 01.2.
If the textbox is not empty, I want to enforce a function which validates the value entered by the user (and gives them an alert if the value entered is not according to the format mentioned above). This function needs to be triggered when the textbox loses its focus. I am not sure how to go ahead in writing this function as I am still new to this.
Any help would be appreciated.
p.s. This function should be triggered each time there is a change in the value. Like suppose, the user enters a value 22, then when the textbox loses its focus, the JavaScript function should be triggered giving them an alert asking the user to change it to the accepted format which is 22.0.The function should be triggered again when the textbox loses its focus (after the change has been done). This time there would not be an alert since the user entered it in the right format.
Excuse the Prototype specific code, but maybe you'll get the gist of it. You'll want to listen on the "onblur" event of the textarea, and then validate the entered value with a regular expression.
Event.observe('textboxId', blur, function() {
var val = $F('textboxId');
if (/^\d{2}\.\d$/.test(val)) {
alert('Invalid value');
}
});
If you're not familiar with any javascript frameworks, and just want to get this working, try this:
<textarea onblur="validate(this.value);"></textarea>
<script type="text/javascript">
function validate(val) {
if (/^\d{2}\.\d$/.test(val)) {
alert('Invalid value');
}
}
</script>
Purists, please don't punish me for adding this.

Categories

Resources