CODEWITHSUNDEEP
jqueryhtmlvalidation
Nick
Nick

Reputation: 14283

How to properly validate multiple inputs on click with html5 datalist

I'm trying to validate the text contained into 3 different inputs on click. The inputs are using the html5 datalist, so that you can both type or select from a pre-populated list the desired value.

Everything is working "fine" except that i want to validate on click the text contained into the inputs so that it is not possible to submit a text not from the list.

i found and tried the code from this question here:

How can i validate the input from a html5 datalist?

and i think it works fine for that guy, but my issue is that i have 3 different fields to validate, and i'm not really sure which is the best way to do this, as it have to allow people to submit empty value or from the list, not something typed but not found.

This is the code i've tried so far:

$('#click').click(function () {
        var tag1 = $("#tag1").val() + " ";
        var tag2 = $("#tag2").val() + " ";
        var tag3 = $("#tag3").val();

        var obj1 = $("#tags").find("option[value='" + tag1 + "']");
        var obj2 = $("#tags").find("option[value='" + tag2 + "']");
        var obj3 = $("#tags").find("option[value='" + tag3 + "']");

        var objects = obj1 + obj2 + obj3;

        if (objects != null && objects.length > 0)
            alert("valid");
        else
            alert("invalid");
})

and here a jsfiddle to see the code in action: http://jsfiddle.net/j7ehtqjd/69/

Thanks

EDIT

Thanks for your suggestions, I changed the code, but still it doesn't work. Here's the new fiddle to check: http://jsfiddle.net/0dghofgk/

Upvotes: 0

Views: 688

Answers (1)

Andriy Horen
Andriy Horen

Reputation: 2940

First i'd read all acceptable values from datalist element.

<datalist id="languages">
    <option value="java">Java</option>
    <option value="csharp">C#</option>
    <option value="ruby">Ruby</option>
    <option value="python">Python</option>
</datalist>

Here javascripts (or JQuery) map comes in handy:

var languages = $("#languages option").map(function () {
    return this.value;
}).get();

Then it is quite easy to validate by just checking if inputs value is in the array, like so:

var valid = languages.indexOf(value) >= 0;

And to let people enter empty value.

var valid = languages.indexOf(value) >= 0 || value === "";

Update:

Putting all together your code for validation of multiple inputs can look like this (please see inline comments):

// getting all valid values
var languages = $("#languages option").map(function () {
    return this.value;
}).get();

$("form").on('submit', function (e) {   
    var allValid = $("input").filter(function (key, element) {
        var value = $(element).val();

        // here we filter out all valid input fields
        return value !== "" && languages.indexOf(value) < 0;
    }).length === 0;  // and check if anything else left
                      // if not then form is valid

    $(".validation-result").toggleClass("hidden", allValid);

    e.preventDefault();
});

UPDATED JSFiddle Demo

Upvotes: 3

Related Questions