一个表单中的输入字段是一个提交按钮所需的，但不适用于其他表单？

问题描述：

How can I differentiate two separate actions for my submit buttons in one form, whereas one SAVES data into database (as is), and other submits form as a valid request, >>but<< according to HTML5 native validation (I use "required" attributes in HTML form)?

My form has 66 fields and I don't want to validate them all in PHP AFTER submission (as it's too cumbersome and time consuming), or validate them all in JS BEFORE submission (as I am not that agile in JS, as in PHP), so I use "required" and "type" attributes in HTML5, which is very convenient and quite versatile way of validation (besides older browsers). However I cannot find a easy way to bypass the "required" attribute, when using save button, but not using "Send for submission" button. Can you help suggest a solution? I guess the prefered way is some JS/jQuery way, as I cannot determine which button would be used before hitting the button (so that I can make a field required or not).

Sample code:

<form>
A: <input type="text" name="A" required />
B: <input type="text" name="B" required />
C: <input type="text" name="C" />
<input type="submit" name="save" value="Save"> <!--do not require anything-->
<input type="submit" name="send" value="Send  for submission"> <!-- require everything-->
</form>

Of course my form is huge, as it has 66 fields, so best solutions here are possibly general and versatile.

如何在一个表单中区分提交按钮的两个单独操作，而将一个SAVES数据分成数据库（原样））和其他提交形式作为有效请求，＆gt;＆gt;但是＆lt;＆lt; 根据 HTML5原生验证 strong>（我在HTML表单中使用“必需”属性）？ p>

我的表单有66个字段，我不想全部验证它们在PHP提交后 strong>（因为它太麻烦和耗时），或者在 JS BEFORE提交 strong>中验证它们（因为我在JS中不那么敏捷，如在PHP中），所以我在HTML5中使用“必需”和“类型”属性，这是一种非常方便且通用的验证方式（除了旧浏览器）。但是，当使用save时，我找不到绕过“required”属性的简单方法按钮，但不使用“发送提交”按钮。你能帮忙建议一个解决方案吗？我想首选的方式是一些JS / jQuery方式，因为我无法确定在按下按钮之前将使用哪个按钮（这样我可以创建一个或不需要字段）。 p>

示例代码： p>

＆lt; form＆gt; A：＆lt; input type =“text”name =“A”required /＆gt; B：＆lt; input type =“text “name =”B“required /＆gt; C：＆lt; input type =”text“name =”C“/＆gt; ＆lt; input type =”submit“name =”save“value =”Save“＆gt; ＆lt;！ - 不要求任何东西 - ＆gt; ＆lt; input type =“submit”name =“send”value =“发送提交”＆gt; ＆lt;！ - 需要一切 - ＆gt; ＆lt; / form＆gt; code> pre> 当然我的表格很庞大，因为它有66个字段，所以最好的解决方案这里可能是一般的和多才多艺的。 p> div>

答

I've eventually come up with something like this. HTML:

<input type="submit" name="save" value="Save" onClick="removeRequired(this.form)">

JS (using jQuery):

function removeRequired(form){
    $.each(form, function(key, value) {
        if ( value.hasAttribute("required")){
            value.removeAttribute("required");
        }
    });
}

This is tested and working. It has this nice property, that I can keep the function elsewhere in files, to not clutch the php/html that is executing it. Only improvement I'd like (and probably other would be interested in) would be to eliminate jQuery as it's only used for browsing each input element in form, which seems easy enough for pure JS. However I could not find an easy way, and run out of time and used above with jQuery. Thanks

答

Something like this might get you started:

$('#sub1').click(function() {
  $('[name=A]').removeAttr('required');
  $('[name=B]').removeAttr('required');
  $('form').append('<input type="hidden" name="save" />');
  $('form').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  A: <input type="text" name="A" required /><br>
  B: <input type="text" name="B" required /><br>
  C: <input type="text" name="C" /><br>
  <input id="sub1" type="button" name="save" value="Save">
  <!--do not require anything-->
  <input type="submit" name="send" value="Send  for submission">
  <!-- require everything-->
</form>

</div>

答

To remove the required attribute from all tags before submitting, modify the code to:

$('#sub1').click(function() {
  $('[required]').removeAttr('required');
  $('form').append('<input type="hidden" name="save" />').submit();
});

jsFiddle Demo to show it works

Note this answer also demonstrates chaining the jQuery methods: $(tag).append().submit()

一个表单中的输入字段是一个提交按钮所需的，但不适用于其他表单？

相关推荐