如何在HTML5中使输入字​​段为“必填”？

Question

On my website I have a reservation forum, and I put that the person cannot submit the forum unless submitting their name and phone number.

<p><label>Phone #:<input type="text" id="phone" name="phone" placeholder="###-###-####" style="margin:10px; width:100px; height:15px" required>

It works perfect on every device besides any mobile device using safari, so I wanted to know what code can I use so it can work on all devices.

Any input/help/advice would be appreciated.

Answer 1

Mobile Safari validation isn't really up to par compared to all the other browsers. You can check out feature support by going to Can I use . What I would do to fix this issue is grab Modernizr.js or use some other feature detection to find out if form validation is supported. If it isn't, then just put it in a little JS snippet saying that the field is required.

Something like this should do if you use Modernizr.js and select "Input Attributes" under HTML5.

var jsRequired;

if (!Modernizr.input.required) {
    jsRequired = true;
}

Then on the form submission:

$('#form-submit').on('click', (function(evt) { // this is the form submit button
    evt.preventDefault(); // preventing reload of the page

    if (jsRequired == true) {
        var requiredInputs = $('input[required]');

        for (var i = 0; i < requiredInputs.length; i++) {
            if (requiredInputs[i].value == '') {
                $('#submission-info').text('Whoa whoa whoa, you missed one...');

                // highlight the missed one by adding a class
                requiredInputs[i].className += " submission-error";
                return false; //; stop the rest of the submission
            }
        }
    }

    var formData = $('form#contact-form').serialize(); // serialize data

    $.ajax({
        url: 'mail.php', // rename this to your php file
        type: 'POST',
        data: formData
    }).done(function(response) {
        // do stuff to to show the user that the form was submitted
        $('#submission-info').text('Success, your information has been sent to us (and the NSA of course) and we will reply to you as soon as possible.');
    }).fail(function(response, error) {
        // tell the user what happened that caused the form submission to fail
        $('#submission-info').text('Oh no, something happened. Maybe try again?');
    });
});

Some of the code should be changed around to fit your stuff but otherwise it should be in the general direction of what you are looking to do.