CODEWITHSUNDEEP
javascriptjqueryhtmlformsvalidation
Robin Rodricks
Robin Rodricks

Reputation: 114126

How do I display an error on a field for a custom form validator?

I have already built a form validator in JS, a portion of which is displayed below. I just need help in displaying an error and scrolling to the field.

Okay, so each <input> will have attributes specifying the validation they need, eg:

<input data-mandatory="yes" data-validation="phone" data-max-digits="10">

There attributes are parsed at the time of form submission, and if I come across an errornous field I need to scroll to that field and display an error in English (multilingual not needed).

var $form = $('#main-form');
$form.submit(function(event) {

    event.preventDefault();

    // per field
    $form.find("input,textarea").each(function(f, field){

        // read metadata
        var type = $(field).attr("type");
        var mandatory = $(field).data("mandatory");
        var maxDigits = $(field).data("max-digits")) || 1000;
        var validation = $(field).data("validation");

        // read value
        var value = $(field).value();

        // process mandatory textfields
        if (type == "text" || type == "number"){
            var strValue = trim(value.toString());
            if (mandatory && strValue.length == 0){

                // HOW DO I SHOW AN ERROR AT THE CURRENT FIELD?
                // and how do I scroll to it?
            }
        }

    });
});

Edit: I've got a non-trivial amount of code in node.js (5K LOC) which I'm porting to the client side, which is required by my organization. That code is not displayed above.

Edit: I've looked online for an hour but the jQuery form validator libraries that I've seen do not function the way I need. I already have form sanitation & validation code (which supports various data types like phone number, ZIP code, etc) in Node.js which I'm just porting to the client side.

Upvotes: 0

Views: 70

Answers (1)

user301441
user301441

Reputation: 548

First of all i would recommend to use some free validation plugin. But, if you want for some reason to write it your self, than the answer to your question is:

First you need to have the error message hidden somewhere in your markup. There is a number of ways to do this. Most common solution would be something like that:

<div>
<input type="text" required />
<p class="error">Error</p>
</div>

Than you need to display it, in your example it could be done like this:

// process mandatory textfields
        if (type == "text" || type == "number"){
            var strValue = trim(value.toString());
            if (mandatory && strValue.length == 0){
                //show error
                $(this).parent().find('.error').show();
                //scroll
                 $('html, body').animate({
                  scrollTop: $(this).offset().top
                 }, 2000);
                 return; // stop validation(becouse you dont want to scroll more times)

         }
   }

You will need to figure out some more things (like hide all the errors before validating again), but this should answer your question.

Upvotes: 1

Related Questions