我的表单中只需要1个输入字段[关闭]

Question

My problem is that i have a form which i made in HTML which contains 5 fields which are always required (name, city, adres, house number and phone number)

Then I have 11 fields where only 1 field is required.

My question is specific to those 11 fields only.

So basically when the user submits the form (first 5 are filled in properly) it needs to give some kind of error.

But when 1 or more of those 11 input fields are filled in it needs to go through.

I tried countless of different things. And i just read something about placing those 11 input fields in a class="" and make a custom validator of some kind. I don't know if this is the correct solution (and if it is what does a custom validator look like)

I'm not experienced in php or JQ or JS that's why this is such a big problem for me.

I hope my question is formulated correctly, if not let me know!

Answer 1

If I'm understanding you correctly, you have 11 fields and at least one of them must be filled.

This will require some custom validation, yes.

First, I would suggest having the fields like this:

<input type="text" name="options[]" />

The name can be whatever you want, but the important thing is those square brackets. They define input as an array, so with 11 inputs you'll have 11 items. If you need to tell them apart, try:

<input type="text" name="options[something]" />

Now, the server-side validation. This is the most important part - JS validation is secondary.

To validate this field in PHP, do this:

$completedFields = array_filter($_POST['options']);
if( !$completedFields) die("You did not fill in any of the 11 inputs!");

Simple!

And finally, some JS validation. Presumably you have some kind of submit handler, but if not have your form like this:

<form action="..." method="post" onSubmit="return validationFunction(this);">

Now your JS can be like this:

function validationFunction(form) {
    // if you're using name="options[]":
    var options = form['options[]'];

    // if you're using named options like options[something]
    var options = (function() {
        var elms = form.elements, l = elms.length, i, ret = [];
        for( i=0; i<l; i++) {
            if( elms[i].name.match(/^options\[.*\]$/)) ret.push(elms[i]);
        }
        return elms;
    })();

    // then do this:
    var l = options.length, i;
    for( i=0; i<l; i++) {
        if( options[i].value != "") return true;
    }
    alert("Please fill out at least one of the options.");
    return false;
}

Hope this helps!