Support » Plugin: Masks Form Fields » CSS attributes upon invalid entry

  • Resolved pickme

    (@pickme)


    Hello @ivanpetermann

    Is it possible to trigger CSS attributes (and error messages) eg background-color for a field class name upon the invalid entry (the input parameters are already set on theme’s form fields) to a field via the mask using the function to add custom masks?

    Thank you

    • This topic was modified 4 months ago by pickme.
    • This topic was modified 4 months ago by pickme.
    • This topic was modified 4 months ago by pickme.
    • This topic was modified 4 months ago by pickme.
    • This topic was modified 4 months ago by pickme.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Ivan Petermann

    (@ivanpetermann)

    Hi @pickme,

    You can try something using the example below.

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $("input[name='INPUT_NAME']").mask("(000) 000-0000", {
                reverse: false,
                onComplete: function(val) {
                    $("input[name='INPUT_NAME']").removeClass('INVALID_CLASS_NAME');
                },
                onChange: function(val) {
                    $("input[name='INPUT_NAME']").removeClass('INVALID_CLASS_NAME');
                },
                onInvalid: function(val, e, f, invalid, options) {
                    $("input[name='INPUT_NAME']").addClass('INVALID_CLASS_NAME');
                }
            });
        });
    </script>

    More details: click here

    Plugin Author Ivan Petermann

    (@ivanpetermann)

    Hi @pickme,

    Did this solution work for you?

    Thread Starter pickme

    (@pickme)

    Hi @ivanpetermann

    I will try again and I will let you know. Initially I did not make it to work.

    Thanks

    Thread Starter pickme

    (@pickme)

    Hello @ivanpetermann ,

    With mask “0000” the code below works. However, I tried to change the mask pattern but actions removeClass and addClass do not work. The code I use is this:

    
    function validation_colors() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $("input[type='text']").mask('A', {translation: {'A': {pattern: /[a-zA-Z0-9]/, recursive: true}}}, {
                reverse: false,
                onComplete: function(val) {
                    $("div.fieldset-job_title > div.field-head > label").removeClass("invalid-text").addClass("valid-text");
                },
                onChange: function(val) {
                    $("div.fieldset-job_title > div.field-head > label").removeClass("invalid-text").addClass("valid-text");
                },
                onInvalid: function(val, e, f, invalid, options) {
                    $("div.fieldset-job_title > div.field-head > label").removeClass("valid-text").addClass("invalid-text");
                }
            });
        });
    </script>
    <?php
    }
    
    add_action('wp_footer', 'validation_colors', 10);
    

    Could you please help me find out what is wrong with the pattern ‘A’ that works, but the classes that do not?

    Thank you

    • This reply was modified 3 months, 1 week ago by pickme.
    • This reply was modified 3 months, 1 week ago by pickme.
    Plugin Author Ivan Petermann

    (@ivanpetermann)

    Hi @pickme,

    Try with this code.

    function validation_colors() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $("input[type='text']").mask('A', {
                translation: { 'A': { pattern: /[a-zA-Z0-9]/, recursive: true } },
                reverse: false,
                onComplete: function(val) {
                    $("div.fieldset-job_title > div.field-head > label").removeClass("invalid-text").addClass("valid-text");
                },
                onChange: function(val) {
                    $("div.fieldset-job_title > div.field-head > label").removeClass("invalid-text").addClass("valid-text");
                },
                onInvalid: function(val, e, f, invalid, options) {
                    $("div.fieldset-job_title > div.field-head > label").removeClass("valid-text").addClass("invalid-text");
                }
            });
        });
    </script>
    <?php
    }
    
    add_action('wp_footer', 'validation_colors', 10);
Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.