Custom form validation function on element with html 5

You can install a submit handler on the <form>, and dispatch a custom event from there.

That will look something like this:

$('form.cms-form').on('submit', function(evt) {
    var frm = $(this);
    var allElements = $(this.elements);
    $('#errors').empty();   

    var errors = [];
    var arg = {
        reportValidationError : function( msg ) {
            errors.push(msg);
        },
        form : this
    };
    console.log("all elements: ", allElements);
    allElements.trigger('customValidate', [ arg ]);

    if( errors.length !== 0 ) {
        showValidationErrors(errors);
        return false;
    }
    return true;
});

Then, you can "hook" the customValidate event, and install your own logic...

$('textarea[name=icon]').on('customValidate', function(evt, reporter) {
    var options = $(this).data('options');

    // ... your validation here ...

    // for example:
    var txt = $(this).val();
    if( txt.length < options.min || txt.length > options.max ) {
        reporter.reportValidationError('error: "icon" min/max exceeded!');
    }
})

Here's an example at jsFiddle.

---

Edit

You can style the error reporting, and tweak the code, to look and behave however you want it to. Here's an example.

If I understand correctly what you need, I think you can achieve what you are trying to do using the pattern attribute of any input element.

I've created a very simple form in jsfiddle illustrating this.

The idea is that you update the value of your input with whatever data you have in your model when adding or removing images. The example, just adds one letter f per icon. Then, you can create a regex to match the expected valid results. In the example, pattern="f{1,3}" means that to be valid, the content can be "f", "ff", or "fff" but nothing else, which means that it'll only accept from one to three files to be sent.

You would be using just default html5 form validation, but you may need a bit of tweaking to get it working.

However, if you try this way, you should keep a couple of things in mind:

1. As explained in the specs, the patttern is compiled as a JavaScript regular expression with the global, ignoreCase, and multiline flags disabled
2. Setting the disabled property of your input so that the user can't change it would take it out of the form, and thus it won't be validated
3. Applying certain styles as *display:none" to the input element can cause errors when the validation fails and the browser tries to gain focus on the element.

I hope you this helps