如何防止空白 HTML 表单提交通过？

Question

我正在使用 Formspree（这很棒）除了：我已将所有字段设置为必填，当我手动尝试时，如果没有正确填写所有内容，我无法提交表单，但是我仍然收到一堆空白表格。有没有人经历过/解决过这个问题？

谢谢！

<form action="https://formspree.io/XXXXXXXX" method="post">
<input name="_gotcha" style="display: none" type="text">

<input class="form-control input-lg" name="firstname" placeholder="First Name" required type="text">

<input class="form-control input-lg" name="lastname" placeholder="Last name" required type="text">

<input class="form-control input-lg" name="phone" placeholder="Phone number" required type="text">

<select required name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;">
    <option value="" disabled selected>Please select your country </option>
    <option value="Afganistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="other">Not in the List</option>
    <!-- etc -->
</select>

<input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="url" id="url_field" />

<button id="demo" type="submit">GO</button>

Answer 1

一个简单的解决方案是这样的。 您可以使用 JQuery 来做到这一点

//  Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {

    // Get the Login Name value and trim it
    var name = $.trim($('#log').val());

    // Check if empty of not
    if (name === '') {
        alert('Text-field is empty. You cannot leave is blank!');
        return false;
    }
});

.text-label {
    color: #cdcdcd;
    font-weight: bold;
}
#pwd{
  margin:10px 18px;
  }

#logBtn{
  margin:10px 90px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="login.php" method="post">
    <label>Login Name:</label>
    <input type="text" name="email" id="log" />
    <br/>
    <label>Password:</label>
    <input type="password" name="password" id="pwd" />
    <br/>
    <input type="submit" id="logBtn" name="submit" value="Login" />
</form>

Answer 2

这是您代码的另一种解决方案，因为即使有人在姓名或电话字段中输入“spaces 或将其留空”，它也可以工作。

检查小提琴..

//  Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {

    // Get the Login Name value and trim it
    var fname = $.trim($('#fname').val());
    var lname = $.trim($('#lname').val());
    var phon =$.trim($('#phon').val());

    // Check if empty of not
    if (fname === '') {
        alert('First name is empty.');
        return false;
    }
    else if (lname === '') {
        alert('Last Name is empty.');
        return false;
    }
    else if (phon === '') {
        alert('Phone is empty.');
        return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="https://formspree.io/XXXXXXXX" method="post">
<input name="_gotcha" style="display: none" type="text">

<input class="form-control input-lg" name="firstname" placeholder="First Name" id="fname" required type="text">

<input class="form-control input-lg" name="lastname" placeholder="Last name" id="lname" required type="text">

<input class="form-control input-lg" name="phone" placeholder="Phone number" id="phon" required type="text">

<select name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;">
    <option value="" disabled selected>Please select your country </option>
    <option value="Afganistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="other">Not in the List</option>
    <!-- etc -->
</select>

<input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="url" id="url_field" />

<button id="demo" type="submit">GO</button>

如果有人在输入框中输入空格，则此 Jquery 代码将起作用并要求他在字段中填写正确的文本。

Answer 3

试试 W3Schools 的例子 http://www.w3schools.com/tags/att_input_required.asp

<input class="form-control input-lg" name="firstname" placeholder="First Name" required >

没有等价或任何东西

我认为需要的标签是

required="真/假"