Question

我有一个表单，当我专注于用户名时，整个表单应该弹出，所以我做了以下代码，工作正常。

<p style="background: none; font-weight: bold; color: red;">
    <strong>Admission Enquiry:</strong> <input type="text" class="form-control input-field" placeholder="Your Name">
</p>

<form class="col-md-4 input-form" id="form" action="contact.php" method="post">
    <input type="text" class="form-control" placeholder="Your Name" id="name" name="name" required> <input type="email" class="form-control" placeholder="Your Email"
        id="email" name="email" required> <input type="text" class="form-control" placeholder="Your Phone" id="phone" name="phone" required> <select
        class="form-control" name="options" id="options" style="margin-top: 10px;">
        <option selected>1</option>
        <option>2</option>
    </select> <input type="submit" class="btn btn-danger" id="btn-submit">
</form>

Jquery代码

$('.input-field').focus(function() {
    $(this).hide();
    $('.input-form').css({
        display : 'block'
    });
});

这可以满足要求，但我无法获得required，email，pattern等表单验证。当我按下提交按钮而不输入必填字段时，它不会进行任何验证，在控制台中显示错误An invalid form control with name='name' is not focusable.是否有解决方法？

HTML5表单验证不起作用

0 个答案: