1. NOTICE: If you are using Fabrik and update to Joomla 3.10, you will need to update to Fabrik 3.10. And, if you are using Fabrik, do not upgrade to Joomla 4, we do not have a supported version ready for release. More information on a release date coming soon. Also, please note that Fabrik 3.10 will not install on any Joomla sites less than 3.8.
    Dismiss Notice

How to apply validation class?

Discussion in 'Community' started by trb, Aug 4, 2022.

  1. trb

    trb Member

    Level: Community
    Hi -

    I have 3 fields on my form which are related. All three are "watched" by a fourth element which determines the options presented in this fourth elements dropdown menu. If a validation error occurs on my first element (for example, the user leaves it blank, or in my case fills it in but then deletes it before submitting the form), I reset the second and third elements when the form reloads as they depend on the value of the first element.

    When the form is submitted, the validation detects the empty first element and correctly highlights it in red, as it fails the validation, however the second and third elements which I reset are not highlighted with the red validation message.

    My question is how can I apply the failed validation class to the 2nd and 3rd element, which I reset through my code, so that the user sees the red highlight text for all 3 elements and know they must re-enter all 3?

    Thanks.
     
  2. lousyfool

    lousyfool Well-Known Member

    Level: Community
    How do you "reset" the 2nd and 3rd element, where and what is your code?
    Do you have validations for those elements?
     
  3. trb

    trb Member

    Level: Community
    Hi Lousyfool,

    Thanks. I making an ajax call to a function which checks several conditions and returns a success or an error message. If error, I reset certain elements accordingly as shown below. In this case it is a radio button element. When I reset an element, I would like to highlight it in red, similar to the default form validation failure, to draw the users attention to it.

    jQuery.ajax({
    type: "post",
    url: baseurl+"returningplayercheck.php?firstname="+firstname+"&lastname="+lastname+"&dob="+dateofbirth+"&last_reg="+didyouregisterval+"&form=football&coachescode="+coachesCode,
    cache: false,
    success: function(json){
    var obj = JSON.parse(json);
    var errmsg = obj.data.form;
    var lastyeardistrict = obj.data.district;

    if (errmsg=='age_err') {
    alert('Your child does not meet the age requirements');
    jQuery('input[name="jos_football_18_repeat___returning_register_last_year['+rownum+'][]"]').attr('checked',false);
    }
     
  4. juuser

    juuser Well-Known Member

    Level: Community
    Seems you're already manipulating the DOM with jQuery, so you can continue with the same approach and just add error class also with jQuery, e.g. something like:

    if (errmsg=='age_err') {
    alert('Your child does not meet the age requirements');
    jQuery('input[name="jos_football_18_repeat___returning_register_last_year['+rownum+'][]"]').attr('checked',false);
    jQuery(".fb_el_tablename_elementname").addClass("error").addClass("fabrikError");
    }
     
    lousyfool likes this.

Share This Page