Question

我的表单正在瘫痪，可以在不输入任何字段的情况下提交必填字段。我想使用占位符文本，但它必须将其作为值读取，因此表单会通过？

我正在使用html 5'占位符'和'必需属性。电子邮件地址确实被标记为占位符文本与我认为的格式不匹配。

有没有办法让表单标记其他必填字段？

<form action="FormToEmail.php" method="POST" name="Competition">                                                                  
<div id="text">
<input class="field" value="" type="text" name="Name" required placeholder="FULL NAME*"> 
<input class="field" value="" type="email" name="Email" required placeholder="EMAIL ADDRESS*">  
<input class="field" value="" type="text" name="Contact-number" required placeholder="CONTACT NUMBER*"> 
<input class="field" value="" type="text" name="Code" required placeholder="UNIQUE CODE*"> 

<p>I have read the Terms and Conditions</p><input type="checkbox" name="Terms and Conditions" value="Selected" required></div>
<p >Read the <a href="competition-terms.html"> Terms and Conditions</a>.</p>

<p>* required field</p>

<input class="btn btn-draw" type="submit" name="submit" value="Submit!" />  
</form>

编辑：我现在回想起我正在使用下面的javascript来显示旧版本的Internet Explorer中的占位符文本。这个脚本确实适用于空字段提交的敲门效果。我可能最喜欢这样做，但是如果有任何全面的解决方案可以确保在旧浏览器中显示占位符文本并且标记空字段，我会感兴趣。

$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
  input.val('');
}
})
});

Answer 1

好的，如果输入值与占位符相等，则需要阻止表单提交：

}).blur().parents('form').submit(function(event) {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
    event.preventDefault();
    input.val('');
}

你在使用任何插件吗？哪个浏览器有问题？

测试没有显示任何问题。

https://jsfiddle.net/mcymnayz/

<form action="FormToEmail.php" method="POST" name="Competition">                                                                  
    <div id="text">
        <input class="field" value="" type="text" name="Name" required placeholder="FULL NAME*"> 
        <input class="field" value="" type="email" name="Email" required placeholder="EMAIL ADDRESS*">  
        <input class="field" value="" type="text" name="Contact-number" required placeholder="CONTACT NUMBER*"> 
        <input class="field" value="" type="text" name="Code" required placeholder="UNIQUE CODE*"> 

        <p>I have read the Terms and Conditions</p><input type="checkbox" name="Terms and Conditions" value="Selected" required>
    </div>
    <p >Read the <a href="competition-terms.html"> Terms and Conditions</a>.</p>

    <p>* required field</p>

    <input class="btn btn-draw" type="submit" name="submit" value="Submit!" />  
</form>

由于使用“占位符=”而使用空的必填字段提交表单

1 个答案: