Issue with spry validation from a dynamically updated input field vai javascript - javascript

I have a form on my website that uses spry validation widgets. I have recently added a date feature that uses 3 drop down boxes (day, month, year). I've used the onchange feature of the selection boxes to update a text field with the date and used spry validation on that input box to make sure its a valid date.
The JavaScript update function works but the spry does not consider the input text field changed. If I manually input the same date in the same format into the field the validation works, it's just when the field is changed dynamically via JavaScript that it does not work.
Any ideas why this is happening and how to fix it?

Here's what worked for me:
Say you have sprytextfield1 as the variable for your validation text field. Then use
sprytextfield1.removeHint()
sprytextfield1.setValue('your value goes here')
sprytextfield1.validate()

I figured it out. When I finish updating the input field via javascript I needed to add this line of text to trigger the spry validation.
spryNameofSpry.validate();
Hope this helps someone someday.

Related

Javascript - Set Required level doesn't work

I use JavaScript to set required level of field based on some selections, the field appears as optional but the form doesn't able to save and says please fill this field.
My code
Xrm.Page.ui.controls.get("new_field").setRequiredLevel("none");
I don't know why this happen i tried to hide the field using this code
Xrm.Page.ui.controls.get("new_field").setVisible(false);
it hides the field but when i press save the field appears again like a charm and cannot save the form.
The script doesnt look quite right,
setRequiredLevel
Xrm.Page.getAttribute("new_field").setRequiredLevel("none");
Visible
Xrm.Page.getControl("new_field").setVisible(false);

Focus an input field with javascript?

I've seen this done a few times before I think, but no explicit examples come to mind.
What I want to do is use javascript to toggle the currently selected form field. For example, I have a form field for a date of birth input, and one for an email. Once the date of birth is validated, the cursor will automatically switch to the email input field.
I would be using jQuery's change() event binder to monitor field changes and validate locally, and then execute the move on, I'm just not sure how to select a form field.
I may be wrong, and this may not be possible, but if it is, any help would be greatly appreciated as I've yet to find anything using the search queries I think would be most appropriate.
Thanks :).
You can trigger the focus event.
$("#email").focus();
You may find though, that the change event doesn't actually fire until the input field has lost focus, so you may need to listen to the keyup/paste events instead
Read more about .focus()
You are looking for the .focus() function. It will set a given element as selected (focused).

Suggestion needed for NON JavaScript version of an input autocomplete

I'm building an App that is heavy on jQuery. Most of it I can handle without the use of JS and still have a functioning site, however there is one bit that is eluding me. (note, I'm using ASP.NET MVC but that shouldn't matter in this instance)
I have an input field that is making great use of jQuery-UI AutoComplete. The behavior is very simple. The user is asked to input their City, but is given an AutoComplete list of valid cities. If the city is invalid, the server side validation fires and tells them to try again.
If they do select a valid city, the jQuery method updates a hidden field that contains the CityID of the selected city. This is working phenomenally well, and I really like the performance.
Here's where the problem enters. If JS is not available in the browser, the ID field is not updated, and hence the DB is not updated. I am not using the AutoComplete input on the server side at all, just the ID field. What would be a good solution to circumvent this issue?
Default to a select element containing the cities as options and id's as values, and change it to the autocomplete field with the script on page load.
If for some reason sje397's answer doesn't work for you (it's an elegant solution, unless the city auto-select is based on some other field on-screen, such as a zip code or state), simply POST both fields. When evaluating the POSTed data, if the CITY text box has data, and the hidden field does not, then evaluate the entered city using the same validation method used by the jquery callback. If the hidden field has data, you assume that javascript is enabled and use your current logic.
Several options:
1 - Serve HTML initially that shows the "hidden" input, and doesn't include the "autocomplete" one. When JS loads, have a function edit the DOM to your current situation.
2 - Have the form default to send the "autocomplete" data to the server. Use javascript to edit the "send" function to have it switch to the "hidden" input.
Get the page to by default to send the input of the user over the intertubes to your server, if javascript is enabled, change it so it only sends the ID over instead (using javascript obviously).

Make input field jquery ui datepicker editable

I've scanned trough the documentation but I can't find out how I to get the field to get the datepickers value AND let it be editable using my keyboard numpad. So filling/editing the date without using the datepicker.
I hope my question is clear cause I don't know how the formulate it otherwise.
It is already ( see http://jqueryui.com/demos/datepicker/ ) editable.

Prevent form field to be edited without disabling field

I am currently working on a page that has a date picker for one of the field.
One of the requirements by my client is to prevent the user from editing the field manually. Only the date picker would be possible to be used. (jQuery DatePicker)
I had in mind to disable the field and use an hidden field to store the data (disabled from object ton send data on post). This sounds a bit wacky for something that could be done by javascript I'm pretty sure.
So the big question, in javascript is it possible to prevent manual edition of a field without stopping datepicker plugin?
Instead of disabling the field, just add the readonly attribute. It will have a similar effect as disabling the field, but without the need to store the value to a hidden field.
You can also access this property with javascript if needed:
document.getElementById("myTextBoxID").readOnly = true;

Categories

Resources