specify custom error message as an attribute

[Richard87]

Hi!

I would love to specify the error message as an attribute in the input field... Is this possible or hard to make?

Best regards, Richard

[MatthewDaniels]

Hi Richard,

you should be looking into the prompt method. Here is an example that works well for me:

In the example below, I use data attributes to define the custom error message - specifically on the email field, but the same can be applied to all the fields, with the exception of the password field as I use a custom rule for that (see the javascript block below).

Markup:

<form id="formUser" role="form" action="/" method="POST">
    <!-- First & Last names -->
    <div class="row clearfix">
        <div class="col-sm-6">
            <div class="form-group form-group-default required">
                <label>First name</label>
                <input type="text" class="form-control" id="firstName" name="firstName" placeholder="User's first name" data-validate="required" required>
                <span class="help-text colour-danger">&nbsp;</span>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group form-group-default required">
                <label>Last name</label>
                <input type="text" class="form-control" id="lastName" name="lastName" placeholder="User's last name" data-validate="required" required>
                <span class="help-text colour-danger">&nbsp;</span>
            </div>
        </div>
    </div>
    <!-- Email -->
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group form-group-default">
                <label>Email</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="User's email address." data-validate="email" data-error-message="Please enter a valid email address." required>
                <span class="help-text colour-danger">&nbsp;</span>
            </div>
        </div>
    </div>
    <!-- Password -->
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group form-group-default">
                <label>Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Minimum of 8 characters." data-validate="password" required>
                <span class="help-text colour-danger">&nbsp;</span>
            </div>
        </div>
    </div>
</form>

Javascript:

// Add the custom rules for verifyjs
$.verify.addRules({
    url: {
        regex: /^https?:\/\/(\S+(\:\S*)?@)?((?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(\.([a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(\.([a-z\u00a1-\uffff]{2,}))(:\d{2,5})?(\/[^\s]*)?$/i,
        message: "Invalid URL"
    },
    password: function(inputField) {
        var val = inputField.val();
        console.log('verify password', val);

        if (val.length === 0) {
            // too short
            validPassword = false;
            message = 'Your password cannot be empty. It must contain at least 1 letter and 1 number.';
        } else if (val.length > 0 && val.length < 8) {
            // too short
            validPassword = false;
            message = 'Your password must contain at least 8 characters.';
        } else if (!val.match("[0-9]") || !val.match("[A-Za-z]")) {
            //wrong characters
            validPassword = false;
            message = 'Your password must contain at least 1 letter and 1 number.';
        } else {
            // all good
            validPassword = true;
        }

        if (!validPassword) {
            return message;
        }
        return true;
    }
});

$.verify({
    // set the error class (bootstrap)
    errorClass: 'has-error',
    // set the error checking to be "live"
    hideErrorOnChange: true,

    // set the error container that I want to use - this is the element that the error class is add to and removed from
    errorContainer: function(input) {
        $inputContainer = input.parent();
        return $inputContainer;
    },

    // this handles the element prompts
    prompt: function(element, text) {
        // do nothing if there is no validate data atrribute
        if (!element.data('validate')) return;

        // I am using a span with the class .help-text as the message, but this is just selecting an element to set the error message on, so change for your needs
        if ($(element.parent('.input-group')).length < 1) {
            $helpText = element.next('.help-text');
        } else {
            // we are inside an input group - we need to get out of it
            $helpText = $(element.parent('.input-group')).next('.help-text');
        }

        // can't find a helpText element - just exit
        if ($helpText.length < 0) return;

        if (text) {
            // this grabs the data attribute error-message from the element being checked or uses the default text for the validation rule
            text = element.data('error-message') ? element.data('error-message') : text;

            // this sets the text on the element we want to display the error message on
            $helpText.html(text || '&nbsp;');

            // this is setting a class that I use to display the help text / error message (.active) - I use css transitions to nicely transition the height of the element, but you could just as easily use javascript or display: none / display: block
            if (text === '' || text === '&nbps;') {
                $helpText.removeClass('active');
            } else {
                $helpText.addClass('active');
            }
        } else {
            $helpText.html('&nbsp;');
            // no error - let's clear the messages
            $helpText.removeClass('active');
        }
    }
});

Hope that helps!

Cheers,
Matt

[Richard87]

Hi! Thanks for this, I will look into it shortly 👍