Question

我的页面上有一个表单，用感谢图片之类的东西逐渐消失。我的所有inputs都是required，但如果您没有填写表单中的所有内容，则仍然会出现淡出效果。

我认为这是因为我在input使用type="image"元素，因为当我使用普通按钮元素时，除非我填写所有内容，否则不会出现淡入淡出。

额外信息：表单在后端工作，只是在没有填写每个输入时都不允许更改。

HTML（表单）

<form id="form" action="/" method="POST">
    <div>
        <div class="inputName">
            <label for="name">Name</label>
            <input class="input" type="text" id="name" name="name" required>
        </div>

        <div class="inputEmail">
            <label for="email">Email</label>
            <input class="input" type="text" id="email" name="email" required>
        </div>
    </div>

    <div>
        <div class="inputSubject">
            <label for="subject">Subject</label>
            <input class="input" type="text" id="subject" name="subject" required>
        </div>
    </div>

    <textarea name="message" id="text" cols="30" rows="10" required></textarea>

    <input type="image" id="send" src='https://i.imgur.com/Tt39rjV.png' onmouseover="this.src='https://i.imgur.com/81fmcHg.png';" onmouseout="this.src='https://i.imgur.com/Tt39rjV.png';" border="0" alt="Send" />
</form>

编辑：可能也很重要，我的Javascript / jQuery做了褪色：

$('#message').click(function(e){    
    $('.contact1').fadeOut('slow', function(){
        $('.contact2').fadeIn('slow');
    });
});

$('#send').click(function(e){    
    $('.contact2').fadeOut('slow', function(){
        $('.contact3').fadeIn('slow');
    });
});

Answer 1

我认为这是因为我正在使用type =“image”的输入元素，因为当我使用普通按钮元素时，除非我填写，否则不会出现淡入淡出一切。

这正是重点。如果你这样做，你将不得不自己验证它。将button与type="submit"一起使用，并将图片放在其中。此外，将您的淡入淡出逻辑连接到表单的submit事件，而不仅仅是单击。

<input type="image">适用于应捕获点击坐标的用例。

form.addEventListener("submit", e => {
   e.target.textContent = "Submitted!";
   e.preventDefault();
});

<form id="form" action="/" method="POST">
    <div>
        <div class="inputName">
            <label for="name">Name</label>
            <input class="input" type="text" id="name" name="name" required>
        </div>

        <div class="inputEmail">
            <label for="email">Email</label>
            <input class="input" type="text" id="email" name="email" required>
        </div>
    </div>

    <div>
        <div class="inputSubject">
            <label for="subject">Subject</label>
            <input class="input" type="text" id="subject" name="subject" required>
        </div>
    </div>

    <textarea name="message" id="text" cols="30" rows="10" required></textarea>

    <button type="submit">
       <img style="width: 20px" src='https://i.imgur.com/Tt39rjV.png' onmouseover="this.src='https://i.imgur.com/81fmcHg.png';" onmouseout="this.src='https://i.imgur.com/Tt39rjV.png';"/>
    </button>
</form>

_{（此外，我相信永远不应该使用jQuery。）}

Answer 2

试试这段代码：

1.您可以设置txtBox所需的文本框的ID并使用以下代码 -

$(function(){
$("#my-form").validate();
});

$(function(){
if($("#txtBox").val() != ""){
$('form[name="required-form"]').submit(function(event){
    $('#required-form').fadeOut("slow", function () {
    $('#optional-form').fadeIn("slow");
}
else{alert('Please fill in the required fields');}
});

Answer 3

我在W3schools.com上试了一下你的代码试试编辑器。它工作正常，并且在单击该按钮时验证空字段

查看图片W3schools tryit editor results

即使是空的必填字段，我的表单也会提交

3 个答案: