Html5 Required Attribute One Of Two Fields

Question

I have a form with two required input fields:

Solution 1:

Update 2020-06-21 (ES6):

Given that jQuery has become somewhat unfashionable in the JavaScript world and that ES6 provides some nice syntactic sugar, I have written a pure JS equivalent to the original answer:

document.addEventListener('DOMContentLoaded', function() {
    const inputs = Array.from(
        document.querySelectorAll('input[name=telephone], input[name=mobile]')
    );

    constinputListener = e =>
        inputs
            .filter(i => i !== e.target)
            .forEach(i => (i.required = !e.target.value.length));

    inputs.forEach(i => i.addEventListener('input', inputListener));
});

Note that the above uses arrow functions and Array.from so does not work in IE11 without the use of a transpiler such as Babel.

Original Answer (jQuery):

I played around with some ideas and now have a working solution for this problem using jQuery:

jQuery(function ($) {
    var $inputs = $('input[name=telephone],input[name=mobile]');
    $inputs.on('input', function () {
        // Set the required property of the other input to false if this input is not empty.
        $inputs.not(this).prop('required', !$(this).val().length);
    });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formmethod="post">
  Telephone:
  <inputtype="tel"name="telephone"value=""required><br>Mobile:
  <inputtype="tel"name="mobile"value=""required><br><inputtype="submit"value="Submit"></form>

This uses the input event on both inputs, and when one is not empty it sets the required property of the other input to false.

I've written a jQuery plugin wrapping the above JavaScript code so that it can be used on multiple groups of elements.

Solution 2:

You would better do form data validation with Javascript anyway, because the HTML5 validation doesn't work in older browsers. Here is how:

<!DOCTYPE html><html><head><metacharset="utf-8"><title>Form Validation Phone Number</title></head><body><formname="myForm"action="data_handler.php"><inputtype="tel"name="telephone"><inputtype="tel"name="mobile"><inputtype="button"value="Submit"onclick="validateAndSend()"></form><script>functionvalidateAndSend() {
            if (myForm.telephone.value == '' && myForm.mobile.value == '') {
                alert('You have to enter at least one phone number.');
                returnfalse;
            }
            else {
                myForm.submit();
            }
        }
    </script></body></html>

. Live demo here: http://codepen.io/anon/pen/LCpue?editors=100. Let me know if this works for you, if you will.

Solution 3:

For two text fields @Andy's answer is working awesome, but in case of more than two fields we can use something like this.

jQuery(function ($) {
    var $inputs = $('input[name=phone],input[name=mobile],input[name=email]');
    $inputs.on('input', function () {
        var total = $('input[name=phone]').val().length + $('input[name=mobile]').val().length + $('input[name=email]').val().length;
        $inputs.not(this).prop('required', !total);

    });
});

Solution 4:

Based on Andy's answer, but I needed a checkbox implementation & came up with this.

what role(s) do you want?
<inputtype="checkbox"data-manyselect="roler"name="author"required><inputtype="checkbox"data-manyselect="roler"name="coder"required><inputtype="checkbox"data-manyselect="roler"name="teacher"required>

where will you work?
<inputtype="checkbox"data-manyselect="placement"name="library"required><inputtype="checkbox"data-manyselect="placement"name="home"required><inputtype="checkbox"data-manyselect="placement"name="office"required>

jQuery(function ($) {
    // get anything with the data-manyselect// you don't even have to name your group if only one groupvar $group = $("[data-manyselect]");

    $group.on('input', function () {
        var group = $(this).data('manyselect');
        // set required property of other inputs in group to falsevar allInGroup = $('*[data-manyselect="'+group+'"]');
        // Set the required property of the other input to false if this input is not empty.var oneSet = true;
        $(allInGroup).each(function(){
            if ($(this).prop('checked'))
                oneSet = false;
        });
        $(allInGroup).prop('required', oneSet)
    });
});

Here for anyone else getting here by googling and wanting a quick solution for one of many checkboxes.

Html5 School