CSS attributes upon invalid entry

Resolved pickme
(@pickme)

4 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 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)

4 months ago

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)

3 months, 3 weeks ago

Hi @pickme,

Did this solution work for you?

Thread Starter

pickme

(@pickme)

3 months, 3 weeks ago

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)

3 months, 1 week ago

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)

3 months ago

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.

Views