CSS attributes upon invalid entry

  • Resolved pickme

    (@pickme)


    2 years, 9 months ago

    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 2 years, 9 months ago by pickme.
    • This topic was modified 2 years, 9 months ago by pickme.
    • This topic was modified 2 years, 9 months ago by pickme.
    • This topic was modified 2 years, 9 months ago by pickme.
    • This topic was modified 2 years, 9 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 2 years, 8 months ago by pickme.
    • This reply was modified 2 years, 8 months 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)
  • The topic ‘CSS attributes upon invalid entry’ is closed to new replies.