I want to make the input field has unique value

Question

let us say that there is 5 input field for page (A)

<form class="classesName" action="action.php" method="POST">
     <input type="text" name="class1" placeholder="Class Name1?" required="">
     <input type="text" name="class2" placeholder="Class Name2?" required="">
     <input type="text" name="class3" placeholder="Class Name3?" required="">
     <input type="text" name="class4" placeholder="Class Name4?" required="">
     <input type="text" name="class5" placeholder="Class Name5?" required="">
</form>

I want the user to fill all the fields BUT it must be unique class name for each field

so he can't fill

class a

class b

class a < this one is duplicated so it should display an error message

class c

class d

I think I can make if statement in the action.php page to check is there a duplication in the submitted field or not

but I don't want all the other values to be lost when I reload this page again to display the error for him

is there like a property in html5 or anything like that ?

thanks

Answer 1

No, this cannot be done with HTML5 alone. You'll have to write some JavaScript to make this happen. The JavaScript code should check all the values and if any two are identical prevent the form from submitting successfully.

Answer 2

In this case you could use javascript to validate the fields every time the user fills out a textbox. Here is an example:

$('input[type=text]').on('change',function(){
    var arr = [];
    $siblings = $(this).siblings();
    $.each($siblings, function (i, key) {
       arr.push($(key).val()); 
    });
    if ($.inArray($(this).val(), arr) !== -1)
    {
        alert("duplicate has been found");
    }
});

JSFiddle: http://jsfiddle.net/x66j3qw3/

Answer 3

var frm = document.querySelector('form.classesName');
var inputs = frm.querySelectorAll('input[type=text]');

frm.addEventListener('submit', function(e) {
    e.preventDefault();
    var classArr = [];

    for(var i = 0; i < inputs.length; i++) {
        if(classArr.indexOf(inputs[i].value) != -1) {
            inputs[i].style.backgroundColor = "red";
            return false;
        }
        else
            classArr.push(inputs[i].value);
    }
    frm.submit();
});

jsfiddle DEMO