cheesegrits
Support Gopher
I've been noodling around with some JavaScript, thought I'd share this one.
I recently had a powerful need to do JavaScript validation when the Submit button is pressed, aborting the submit if validation of certain fields failed. In this case it's a form that has to create a Joomla user, so I really wanted to validate things like matching password fields, non-blank emails, etc. BEFORE submitting the form. That way I can safely create the user in the "as soon as form submitted" PHP script.
So ... I created a 13.js (the ID of my form) in ./components/com_fabrik/js, which Fabrik will automatically load when the form is displayed, with the following:
It'd be easy enough to make this more generic by passing the form ID as an argument, and building the form and element names on the fly. And I'll probably tweak the email test with an actual regexp test for a valid email format. But the above works. Hope it helps someone.
-- hugh
I recently had a powerful need to do JavaScript validation when the Submit button is pressed, aborting the submit if validation of certain fields failed. In this case it's a form that has to create a Joomla user, so I really wanted to validate things like matching password fields, non-blank emails, etc. BEFORE submitting the form. That way I can safely create the user in the "as soon as form submitted" PHP script.
So ... I created a 13.js (the ID of my form) in ./components/com_fabrik/js, which Fabrik will automatically load when the form is displayed, with the following:
Code:
function watchSubmit(e){
// Select the Submit button and bind our submitMyForm() to the 'click' event.
// Would need to be a bit more selective about this if more than one form
var submit_button = $E('input[name=Submit]');
if (submit_button) {
submit_button.addEvent('click', function(e){
e = new Event(e);
e.stop();
submitMyform('');
}.bind(this))
}
}
function submitMyform() {
// We get called from the click event handler.
// Do the form validation, only call form.submit() if it passes all tests.
// First the regexp we use for validating the characters used in the username
var r = new RegExp("[\<|\>|\"|'|\%|\;|\(|\)|\&|\+|\-]", "i");
// select the form ... it'll always be fabrikXX, where XX is your form ID.
var form = $E('form[name=fabrik13]')
// now do all the validations
if (trim(form.jos_fabrik_formdata_13___name.value) == "") {
alert( "You must provide a name." );
} else if (form.jos_fabrik_formdata_13___username.value == "") {
alert( "You must provide a user login name." );
} else if (r.exec(form.jos_fabrik_formdata_13___username.value) || form.jos_fabrik_formdata_13___username.value.length < 3) {
alert( "You login name contains invalid characters or is too short." );
} else if (trim(form.jos_fabrik_formdata_13___email.value) == "") {
alert( "You must provide an e-mail address." );
} else if (form.jos_fabrik_formdata_13___gid.value == "") {
alert( "You must assign user to a group." );
} else if (trim(form.jos_fabrik_formdata_13___password.value) != "" && form.jos_fabrik_formdata_13___password.value != form.jos_fabrik_formdata_13___password2.value){
alert( "Password do not match." );
} else if (form.jos_fabrik_formdata_13___gid.value == "29") {
alert( "Please Select another group as `Public Front-end` is not a selectable option" );
} else if (form.jos_fabrik_formdata_13___gid.value == "30") {
alert( "Please Select another group as `Public Back-end` is not a selectable option" );
} else {
// whoop whoop! we passed all validations, so submit the form.
form.submit();
}
// if we get here, we failed validation, so don't do nuffink
return false;
}
Window.onDomReady(function(){
// invoke the watchSubmit function just once when the page loads
// this will bind our submitMyForm function to the Submit button
watchSubmit();
})It'd be easy enough to make this more generic by passing the form ID as an argument, and building the form and element names on the fly. And I'll probably tweak the email test with an actual regexp test for a valid email format. But the above works. Hope it helps someone.
-- hugh
