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
Related
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
I have the following textarea value:
<textarea name="field" id="field" rows="5" class="form-control"
placeholder="Describe your guests" required="">
Checkin(dd.mm.yyyy): 29.07.2015
Checkout(dd.mm.yyyy): 30.07.2015
Last Name: Johnson
First Name: James
Date of birth(dd.mm.yyyy): 12.12.1995
Country Code: ISR
Passport Number: 150150150
Visa: Type D 1520 or Visa:
</textarea>
I want to vaildate the Checkin information, Checkin(dd.mm.yyyy): has to be dd.mm.yyy otherwise throw an error, Country Code: has to be 3 digits all uppercase for example? I know it is much easier to vaildate each field individually. I need to vaildate pieces inside the textarea.. preferably via jQuery. Any suggestions?
If you are planning on using bootstrap or similar templates CSS, you could easily use their validation tools (much cleaner and easier). However, with simple HTML I like to use http://jqueryvalidation.org/ This website provides great tutorials and videos as well.
How about using javascript regular expressions?
How can I write this so the text shows in the text field (search bar) during the page load?
<input type="text" id="addressInput" value="<%=addressStr%>" onblur="if(this.value=='')this.value='Search a location here';" onfocus="if(this.value=='Search a location here')this.value='';" />
At the moment the text only shows when you click in the textfield.
#detonate: You could just add some of the same logic to the ASP value so it'll show Search a location here if addressStr is blank:
<input type="text" id="addressInput" value="<% If addressStr = "" Then Response.Write "Search a location here" End If %>" onblur="if(this.value=='')this.value='Search a location here';" onfocus="if(this.value=='Search a location here')this.value='';" />
it looks like you're trying to setup a watermark for a textbox, is that correct?
I'm going to refer you to a basic example of textbox watermarking that should be able to give you an example and give everyone a bit of a common codebase for discussion, since you didn't include a lot of code in your post: http://www.codeproject.com/KB/aspnet/WatermarkTextBox.aspx
In it, I'll reference one of his codeblocks, that is similar to the one you posted:
<td>
<asp:TextBox ID="txtUserId" runat="server"
onfocus="Focus(this.id,'User ID')"
onblur="Blur(this.id,'User ID')"
Width="126px" CssClass="WaterMarkedTextBox">User ID</asp:TextBox>
</td>
While I realize he used ASP.NET instead of ASP, I wanted to draw attention to the fact that he put <textbox>text</textbox> so that you could see part of the answer to the question you directly asked above.
EDIT: Let me try this again: You would have something like this:
<textbox attributes="" methods="" >
<%=addressStr%>
</textbox>
Hopefully tho, the whole example given on that page will help you. Feel free to ask more questions.
I'm looking for a jQuery image picker plugin that allows me to do the following:
Display a group of images and let the user select one (and only one) by clicking it
If the user does not like any of the specified images, he should be able to upload his own
Just #1 would suffice, as I can add the code for #2 if necessary
It's not that difficult to do I know, but if there is a standard plugin that people use for this, I'd rather use that than reinvent the wheel.
I know this has already been answered but I actually developed a library that address the first problem. You can check it out here:
http://rvera.github.com/image-picker/
Something like this? i dont know if there is plugin but is seems really simple
// HTML
<div id="image_container">
<img src="blabla" />
<img src="blabla" />
...
</div>
<form ...>
<input id="image_from_list" name="image_from_list" type="hidden" value="" />
<input id="image_from_file" name="image_from_file" type="file" />
</form>
// JS
$('div#image_container img').click(function(){
// set the img-source as value of image_from_list
$('input#image_from_list').val( $(this).attr("src") );
});
Have you tried this:
https://code.google.com/p/select-to-image-picker-jquery/
It lets you to change select box into image picker based on JQueryUI modal box.
I was looking for something like this a long time and finally needed to develop it by myself. So maybe you will find useful too.
I'm looking to create a form which contains a dynamic number of input text boxes. I would like each text box to form part of an array (this would in theory make it easier for me to loop through them, especially as I won't know the number of text fields that will eventually exist). The HTML code would like something like:
<p>Field 1: <input type="text" name="field[1]" id="field[1]"></p>
<p>Field 2: <input type="text" name="field[2]" id="field[2]"></p>
<p>Field 3: <input type="text" name="field[3]" id="field[3]"></p>
<p>Field 4: <input type="text" name="field[4]" id="field[4]"></p>
<p>Field 5: <input type="text" name="field[5]" id="field[5]"></p>
This data would then be sent to a PHP script and would be represented as an array - or at least, that's the theory.
So my first question is, is this achievable using HTML? Are forms designed to work that way?
If the answer to that is "yes", how would I then go about accessing each of those using jQuery or failing that, plain old JavaScript?
I've attempted to achieve this using the following jQuery code:
someval = $('#field[1]').val();
and
someval = $('#field')[1].val();
and the following JavaScript:
someval = document.getElementById('related_link_url')[1].value;
But I've not had any luck.
Thanks in advance.
Edit:
I should note that from a Javascript point of view, I've had it working where the ID of each element is something like field_1, field_2 etc. However, I feel that if I can achieve it by placing each text box into an array, it would make for tidier and easier to manage code.
Give each element a class and access the group using jQuery:
<p>Field 1: <input type="text" name="field[1]" class="fields"></p>
<p>Field 2: <input type="text" name="field[2]" class="fields"></p>
<!-- etc... -->
jQuery:
$("input.fields").each(function (index)
{
// Your code here
});
This will run the anonymous function on each input element with a classname of "fields", with the this keyword pointing to the current element. See http://api.jquery.com/each/ for more info.
First of all, id attribute cannot contains [ or ] character.
There is lots of ways to get jQuery/plain JavaScript references to these elements. You can use descendant selector:
<fieldset id="list-of-fields">
<!-- your inputs here -->
</fieldset>
$("#list-of-fields input");
document.getElementById("list....").getElementsByTagName("input");
You can also use attribute selector:
$("input[name^=field]");
I'm not sure whether that's the only way but I think in plain JavaScript you'll have to fetch all input elements (document.getElementsByTagName) and then loop through array of these elements and check each element (whether it has name attribute which value starts with field).