按钮onclick时如何在不同表单上添加所需内容

Question

是否可以在执行按钮之前在不同的表单上添加required？

假设我在JS中使用此代码时有一个HTML代码：

$(function() {
  $('#button1').click(function() {
    $("#email").prop('required', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="email" name="email" placeholder="Email*">
</form>
<form>
  <button id="button1">Submit</button>
</form>

按钮保持执行，即使电子邮件的textfield为空，

预期结果：如果单击按钮

时输入字段为空，则需要显示此文本

jsfiddle

Answer 1

工作小提琴：question/answer

<强> HTML：

<form id="form1">
  <input type="text" id="email_to" name="email_to" required="required" placeholder="Email*">
  <button class="hide submit-form">
  Submit
  </button>
</form>
<form data-submit="#form1">
  <button id="button1">Submit</button>
</form>

<强> JS：

$(document).ready(function() {
    $('form[data-submit]').submit(function(e){
    e.preventDefault();

    var formToSubmit = $(this).attr('data-submit');

    if(formToSubmit){
        $(formToSubmit).find('.submit-form').trigger('click');
    }
  })
})

<强> CSS：

.hide {
    display: none; 
}

<强>更新 https://jsfiddle.net/andreitodorut/xe3z0nas/

Answer 2

你只需要把所有东西放在同一个表格中。

正如您所看到的，现在我已经对分隔符进行了评论，它的工作原理是^^

＆＃13;

＆＃13;

$(function() {
  $('#button1').click(function() {
    $("#email").prop('required', true);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="email" name="email" placeholder="Email*">
<!--</form>
<form>-->
  <button id="button1">Submit</button>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您必须将按钮放在同一个表单标记内。

<强> HTML：

<form>
  <input type="text" id="email" name="email" placeholder="Email*">

  <button id="button1">Submit</button>
</form>

并将require属性添加到电子邮件字段，代码如下：

  <input type="text" id="email" name="email" placeholder="Email*" required="true">

当您提交表格时，它将检查空白状况并显示图像中显示的相同信息。