Validating text input - bug in implementation - javascript

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.

Related

Input mask plugin: How to prevent shifting the input value to left when user delete a part of input value. (Like date or IP address)

I have Vue app that has a date input with masking(dd/mm/yyyy). I am using Maska currently but also tried Inputmask.
Here is the example,
When I fill the input as 22/12/2002 and I delete the part of day (22),
The current behavior:
It pushes the all rest of the input value to left
12/20/02__
Is there any way/a plugin to keep it blank instead of pushing the all input value to left when the user deletes a part of the input?
The ideal behavior:
__/12/2002
I tried InputMask which seemed to have the implementation but could not make it work.
new Inputmask({ alias: 'datetime', inputFormat: 'dd/mm/yyyy', shiftPositions: true });
Also I found actually attribute type="date" to input element works but I need the different date format also the input has some custom style, so it's not really ideal to use it.
Let me know if there is any workaround for these plugins or a plugin that does this behavior.

javascript select only portion of string on input focus

I have form with lot's of date input fields. I would only like to select firs two characters of date (e.g. day portion of the date only) when focusing on a input field. I have accomplished this with this code:
$(".date").focus(function() {
this.setSelectionRange(0, 2);
});
The problem is this only works if I focus on input field with a mouse click. But if moving between input fields with TABULAR key on keyboard then the entire text in input field is selected. Can this be controlled via JavaScript as well?
Here is also JSFiddle which demonstrates above.
It sounds like the default handler is being run after yours.
Prevent this by stopping the browser's default handler by running:
$(".date").focus(function(e) {
e.preventDefault();
this.setSelectionRange(0, 2);
});
i posted here an answer, which is related to what you want , check it out: how-to-select-particular-text-in-textbox

How to disable Sharepoint textbox?

I am trying to disable a textbox in SharePoint WSS3 and force a specific value (given by another JavaScript function) but I can't seem to find the right way of doing it. I have come across different issues. Let's say I have a normal single line text value named prova and another one named Description. Description is required, prova is not.
First Issue: If the field IS required, even if there is something in the textbox, SharePoint says otherwise and does not allow me to insert the entry.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='Description']").attr("disabled", "disabled");
$("input[title='Description']").val(value);
});
Second Issue: If the field IS NOT required SharePoint doesn't say anything but it inserts a blank value instead of the one given.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='prova']").attr("disabled", "disabled");
$("input[title='prova']").val(value);
});
I have a feeling that tells me that there is some kind of SharePoint JavaScript function somewhere that listens for KeyUp or something. I have really no idea what to do now...
EDIT: It looks like the problem is related to disabling the textbox, if I comment the line where I disable the textbox it works in both scenarios. Maybe if I catch the insert request I can re-enable the textbox before SharePoint do the actual post. No idea how to do it though...
Your problem really is related to disabling the textbox first. By default disabled textboxes are not contained in the POST request in IE.
See this post: Disabled form inputs do not appear in the request or this one: how to save data by disabled text box?
What you actually want to do is set the readonly attribute of the field, not disable it (readonly="readonly"). The problem with that is that the readonly state sometimes looks the same as the default state, so you also have to add some CSS to make it look greyed out.

Client Side Validation on date picked to show a textbox in asp.net

I'm trying to add validation to a date textbox, where if the current date picked is less than present date, a textbox appears for additional information.
I've been able to add a custom validation to it, but it only works on hitting the submit button, I'd like to know if there is a way where we can validate the date when picked to show the textbox in a dynamic way rather then hitting the submit button for the textbox to be generated.
you can write script for this
$(function () {
$('#textboxid').datepicker({ minDate: +0 });
});

jquery-ui datepicker with showOn: button showed even if source input is disabled

I have an input text field with a datepicker instance from jquery-ui with the following parameters:
'buttonImageOnly': true,
'showOn': 'button',
'buttonImage': 'gfx/calendar.gif'
It works well. When I click the "calendar.gif" datepicker image, the calendar is shown. However, when I select a date, the input field (which was disabled) is changed.
Is this a bug or am I doing something wrong? When I look at the instance object in Firebug, the disabled parameter is set to true.
Disabled mean you can't manually write in it. But you still can with javascript.
The textbox is where it saves the date value. If you don't want it to show, turn it to a hidden field or hide it with CSS (easier).
The buttonImageOnly is about using a button with an image type or just an image.
I don't see any bug nor error from your part. :)
If you don't care that the image will no longer show, try the following:
$('#myfield:not([disabled])').datepicker();

Categories

Resources