Element validation using Javascript

[Saumier]

J 2.5.7 F 3.0.6
I need to validate a date using Javascript. If it is a good date, I return true, else return false. Here is the basic code :

In the "date" element (a text field). I have the following coding in Javascript:

var dateStr = form_1.formElements.get('datetest___date1').getValue();
date_check3(dateStr);

I then have a 1.js file as (my form id =1):

function date_check3(input) {
// Checks for the following valid date formats:
 // MM/DD/YYYY
 // Also separates date into month, day, and year variables
 var dateStr = input;
.
.
Validation code
alert("Month must be between 1 and 12");
OK = false;
.
.
if (OK) return true;
else return false;
}

That all works fine. (I can see that in Firebug) What I can't figure out is if the date fails and returns false, how to clear the input field and set focus to the field.I still haven't figured out the relationship between Fabrik and plain ole Javascript. I know this should be simple, but.....
Thanks for any help.

 

[cheesegrits]

Usually the best way to interact with Fabrik elements, especially for getting and setting of values, is through the object for that element. Which you are already doing, in the first line of code you quoted in your post. Each element type has it's own JS class, which extends our main element class, and on page load we create each object and store them in an array in the global form object.

The form object is named form_X, where X is your numeric form ID. The array is formElements, keyed by full element name. So to get the object for the date element called 'fab_date_test___date_with_time' in form 19, you would ...

var el = form_19.formElements.get('fab_date_test___date_with_time');

You can then use things like the update() and reset() methods, like ...

el.update('2012-09-23 14:30:32');

... to set a specific date, or ...

el.reset();

... to reset the date to the value it had on page load, which is probably what you want to do.

You can get the value with getValue(), like you did. For complex elements like the date element, this will assemble the element's full value from the constituent parts (cal and time fields).

To give focus, you'd use standard JS techniques, and give focus to the specific DOM element you want, which will probably be the date part. So use Firebug to identify the ID of that, and ...

document.id('fab_date_test___date_with_time_cal').focus();


-- hugh

 

[Saumier]

Well I've tried about everything that made sense to me, but I still can't get it to put focus back on the bad date. It is reset when an error is found. I will pm you access to the site. I'm guessing if you show me how to get the id I'll be able to do whatever I need to do in the future. Thanks for your patience.

P.S. I make some super cheese grits to go with my Shrimp and Grits. If you're ever in the Detroit area I'd be happy to invite you over. I could use a good dose of that myself. I don't make it often because it's about an all day process- a 3 martini cooking session.

 

[rob]

Ok seems that there was a bug in the date element's reset code, if you update from github this bug is fixed. Then you should be able to do the following:

say your date element' full name is 'listname___date' and your form has an id of 1.

then this js should work

var els = Fabrik.blocks['form_1'].formElements;
var date = els.get('listname___date');
date.clear();
date.getDateField().focus();

Alternatively without the github update you can do this:

var els = Fabrik.blocks['form_1'].formElements;
var date = els.get('listname___date');
date.getTimeField().value = '';
date.getDateField().value = '';
date.getDateField().focus();