如何使按钮CSS更改只有IF表单字段有效

How to make a button CSS change only IF form fields are valid

本文关键字：IF 表单 字段 有效 何使 按钮 CSS      更新时间：2024-05-03

目前我的网站只有一个表单和一个按钮。按钮包含一个纸飞机svg和一些javascript，当按下按钮时，飞机会飞起来。

我需要什么：

  • 要起飞的飞机（CSS更改）仅IF以上表单字段有效（姓名、电子邮件、消息）
  • 在提交表单之前添加1秒延迟

现在，按钮正在更改，即使字段中写着"此字段是必需的"并且表单尚未提交。

这是我的网站的演示点击按钮查看。

我知道p标签不应该在button标签中，但除非出于某种原因使用p标签，否则按钮中的文本不会更改（飞机不会飞行）。如果我删除"p"从index.js$('button p').text(function(i, text)内的这条线看不到飞机飞走

HTML：

<form method="post" action="submit.php" class="signin"> 
     <input name="name" id="name" type="text" class="feedback-input" placeholder="Your Name" />   
    <input name="email" id="email" type="text" class="feedback-input" placeholder="Your Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:'.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?'.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)"/>
   <textarea name="message" id="message" class="feedback-input" placeholder="Your Comment or Question" required></textarea>

 <button>
 <p>CLICK HERE</p>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
    <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path> 
  </svg>
</button>
  <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
  <script src="js/index.js"></script>

  </form>

index.js是：

$('button').click(function() {
  $(this).toggleClass('clicked');
  $('button p').text(function(i, text) {
    return text === "Why sent??" ? "Why Sent??" : "Why Sent??";
  });
});

如何使飞机在验证/提交后仅起飞_延迟1秒？感谢

我建议您使用JS验证库作为HTML5验证的后备（jQuery Validation非常简洁）。

无论哪种方式，都要侦听表单上的提交事件（如果使用$.validation，请使用submitHandler配置键）。

$('form#youId').on('submit', function(e){
    e.preventDefault();
    setTimeout(function(){
        // your fliying animation
        // when your flying animation ENDS
        e.target.submit(); // this SENDS the actual form.
    }, 1000);
});

编辑

请参阅本工作示例。

演示备注

  • 您的演示没有包含jQueryValidatejs文件，因此在.Validate（）方法调用时失败
  • 此外，您的演示程序缺少});，导致Unexpected End of Input错误

新的演示使用自定义事件在动画结束后触发表单提交（实际上是在触发后1秒）。

相关文章：