HTML 的 required 属性在使用 AJAX 提交时不起作用。

huangapple
go评论103阅读模式
英文:

HTML required attribute not working with AJAX submission

问题

HTML中的required属性在使用AJAX提交时不起作用。

我已经创建了一个模型表单并将其输入字段设置为required属性，但在使用AJAX时它不起作用。

以下是您提供的HTML代码片段：

  1. <div class="modal fade hide" id="ajax-book-model" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  2.   <div class="modal-dialog modal-lg">
  3.     <div class="modal-content">
  4.       <div class="modal-header">
  5.         <h5 class="modal-title" id="ajaxBookModel">Add New Machine</h5>
  6.         <!-- <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
  7.          <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" onClick="window.location.reload();">
  8.       </div>
  9.       <div class="modal-body">
  10.       <form action="javascript:void(0)" id="addEditBookForm" name="addEditBookForm" class="form-horizontal" method="POST">
  11.          <input type="hidden" name="id" id="id">
  12.          <input type="hidden" name="user_id" id="user_id" value="{{ Auth::user()->id }}">
  13.         <div class="row">
  14.            <div class="col-sm-12 col-md-4">
  15.             <div class="form-group">     
  16.               <label>Name</label>
  17.               <input type="text" id="machine_name" name="machine_name" class="form-control form-control-sm" placeholder="Enter Machine Name" required>
  18.               <span class="text-danger">{{ $errors->first('machine_name') }}</span>
  19.             </div>
  20.            </div>
  21.             <div class="col-sm-12 col-md-4">
  22.             <div class="form-group">     
  23.               <label>IOT Device ID</label>
  24.               <input type="text" id="iot_device_id" name="iot_device_id" class="form-control form-control-sm" placeholder="Enter IOT Device ID" required>
  25.             </div>
  26.            </div>
  27.             <div class="col-sm-12 col-md-4">
  28.             <div class="form-group">     
  29.               <label>Local device ID</label>
  30.               <input type="text" id="local_device_id" name="local_device_id" class="form-control form-control-sm" placeholder="Enter Local Device ID" required>
  31.             </div>
  32.            </div>
  33.         </div>
  34.       </div>
  35.        <div class="modal-footer">
  36.         <button type="button" class="btn btn-sm btn-gradient-danger mb-2" data-dismiss="modal" onClick="window.location.reload();">Close</button>
  37.         <button type="submit" id="btn-save" value="addNewBook" class="btn btn-sm btn-gradient-danger mb-2">Save</button>
  38.       </div>
  39.       </form>
  40.     </div>
  41.   </div>
  42. </div>

以下是您提供的AJAX代码：

  1. $('body').on('click','#btn-save', function (event){
  2.       event.preventDefault();
  3.           var id = $("#id").val();
  4.           var user_id = $("#user_id").val();
  5.           var machine_name = $("#machine_name").val();
  6.           var iot_device_id = $("#iot_device_id").val();
  7.           var local_device_id = $("#local_device_id").val();
  8.           $("#btn-save").html('Please Wait...');
  9.           $("#btn-save").attr("disabled", true);
  10.          
  11.         // ajax
  12.         $.ajax({
  13.             type:"POST",
  14.             url: "{{ url('add-update-piezometer') }}",
  15.             data: {
  16.               id:id,
  17.               user_id:user_id,
  18.               machine_name:machine_name,
  19.               iot_device_id:iot_device_id,
  20.               local_device_id:local_device_id,
  21.             },
  22.             dataType: 'json',
  23.             success: function(res){
  24.              window.location.reload();
  25.             $("#btn-save").html('Submit');
  26.             $("#btn-save").attr("disabled", false);
  27.            }
  28.         });
  29.     });

我只是想要在使用AJAX时运行所需字段验证，但找不到任何解决方案。

如果您有任何具体的问题或需要更多帮助，请随时提出。

英文:

HTML required attribute not working with AJAX submission

I have created a model Form and set its input field to require attribute but its not working with ajax

  1. &lt;div class=&quot;modal fade hide&quot;  id=&quot;ajax-book-model&quot; aria-hidden=&quot;true&quot; data-backdrop=&quot;static&quot; data-keyboard=&quot;false&quot;&gt;
  2. &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
  3. &lt;div class=&quot;modal-content&quot;&gt;
  4. &lt;div class=&quot;modal-header&quot;&gt;
  5. &lt;h5 class=&quot;modal-title&quot; id=&quot;ajaxBookModel&quot;&gt;Add New Machine&lt;/h5&gt;
  6. &lt;!-- &lt;button type=&quot;reset&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt; --&gt;
  7. &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot; onClick=&quot;window.location.reload();&quot;&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&quot;modal-body&quot;&gt;
  10. &lt;form action=&quot;javascript:void(0)&quot; id=&quot;addEditBookForm&quot; name=&quot;addEditBookForm&quot; class=&quot;form-horizontal&quot; method=&quot;POST&quot;&gt;
  11. &lt;input type=&quot;hidden&quot; name=&quot;id&quot; id=&quot;id&quot;&gt;
  12. &lt;input type=&quot;hidden&quot; name=&quot;user_id&quot; id=&quot;user_id&quot; value=&quot;{{ Auth::user()-&gt;id }}&quot;&gt;
  13. &lt;div class=&quot;row&quot;&gt;
  14. &lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
  15. &lt;div class=&quot;form-group&quot;&gt;     
  16. &lt;label&gt;Name&lt;/label&gt;
  17. &lt;input type=&quot;text&quot; id=&quot;machine_name&quot; name=&quot;machine_name&quot; class=&quot;form-control form-control-sm&quot; placeholder=&quot;Enter Machine Name&quot; required&gt;
  18. &lt;span class=&quot;text-danger&quot;&gt;{{ $errors-&gt;first(&#39;machine_name&#39;) }}&lt;/span&gt;
  19. &lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
  22. &lt;div class=&quot;form-group&quot;&gt;     
  23. &lt;label&gt;IOT Device ID&lt;/label&gt;
  24. &lt;input type=&quot;text&quot; id=&quot;iot_device_id&quot; name=&quot;iot_device_id&quot; class=&quot;form-control form-control-sm&quot; placeholder=&quot;Enter IOT Device ID&quot; required&gt;
  25. &lt;/div&gt;
  26. &lt;/div&gt;
  27. &lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
  28. &lt;div class=&quot;form-group&quot;&gt;     
  29. &lt;label&gt;Local device ID&lt;/label&gt;
  30. &lt;input type=&quot;text&quot; id=&quot;local_device_id&quot; name=&quot;local_device_id&quot; class=&quot;form-control form-control-sm&quot; placeholder=&quot;Enter Local Device ID&quot; required&gt;
  31. &lt;/div&gt;
  32. &lt;/div&gt;
  33. &lt;/div&gt;
  34. &lt;/div&gt;
  35. &lt;div class=&quot;modal-footer&quot;&gt;
  36. &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-gradient-danger mb-2&quot; data-dismiss=&quot;modal&quot; onClick=&quot;window.location.reload();&quot;&gt;Close&lt;/button&gt;
  37. &lt;button type=&quot;submit&quot; id=&quot;btn-save&quot; value=&quot;addNewBook&quot; class=&quot;btn btn-sm btn-gradient-danger mb-2&quot;&gt;Save&lt;/button&gt;
  38. &lt;/div&gt;
  39. &lt;/form&gt;
  40. &lt;/div&gt;
  41. &lt;/div&gt;
  42. &lt;/div&gt;

and this is ajax code

i just want to run simpal html required field validation with ajax

  1.  $(&#39;body&#39;).on(&#39;click&#39;,&#39;#btn-save&#39;, function (event){
  2. event.preventDefault();
  3. var id = $(&quot;#id&quot;).val();
  4. var user_id = $(&quot;#user_id&quot;).val();
  5. var machine_name = $(&quot;#machine_name&quot;).val();
  6. var iot_device_id = $(&quot;#iot_device_id&quot;).val();
  7. var local_device_id = $(&quot;#local_device_id&quot;).val();
  8. $(&quot;#btn-save&quot;).html(&#39;Please Wait...&#39;);
  9. $(&quot;#btn-save&quot;). attr(&quot;disabled&quot;, true);
  10. // ajax
  11. $.ajax({
  12. type:&quot;POST&quot;,
  13. url: &quot;{{ url(&#39;add-update-piezometer&#39;) }}&quot;,
  14. data: {
  15. id:id,
  16. user_id:user_id,
  17. machine_name:machine_name,
  18. iot_device_id:iot_device_id,
  19. local_device_id:local_device_id,
  20. },
  21. dataType: &#39;json&#39;,
  22. success: function(res){
  23. window.location.reload();
  24. $(&quot;#btn-save&quot;).html(&#39;Submit&#39;);
  25. $(&quot;#btn-save&quot;). attr(&quot;disabled&quot;, false);
  26. }
  27. });
  28. });

i just want to run required field validation with ajax i could not find any solution .

答案1

得分: 4

尝试将您的按钮单击事件更改为表单提交事件。

  1. $('body').on('submit', '#addEditBookForm', function (event) {
  3.     event.preventDefault();
  4.     var id = $("#id").val();
  5.     var user_id = $("#user_id").val();
  6.     var machine_name = $("#machine_name").val();
  7.     var iot_device_id = $("#iot_device_id").val();
  8.     var local_device_id = $("#local_device_id").val();
  9.     $("#btn-save").html('请稍等...');
  10.     $("#btn-save").attr("disabled", true);
  12.     // ajax
  13.     $.ajax({
  14.         type: "POST",
  15.         url: "{{ url('add-update-piezometer') }}",
  16.         data: {
  17.             id: id,
  18.             user_id: user_id,
  19.             machine_name: machine_name,
  20.             iot_device_id: iot_device_id,
  21.             local_device_id: local_device_id,
  22.         },
  23.         dataType: 'json',
  24.         success: function (res) {
  25.             window.location.reload();
  26.             $("#btn-save").html('提交');
  27.             $("#btn-save").attr("disabled", false);
  28.         }
  29.     });
  30. });
英文:

Try changing your btn click event to form submit event.

  1. $(&#39;body&#39;).on(&#39;submit&#39;, &#39;#addEditBookForm&#39;, function (event) {
  2. event.preventDefault();
  3. var id = $(&quot;#id&quot;).val();
  4. var user_id = $(&quot;#user_id&quot;).val();
  5. var machine_name = $(&quot;#machine_name&quot;).val();
  6. var iot_device_id = $(&quot;#iot_device_id&quot;).val();
  7. var local_device_id = $(&quot;#local_device_id&quot;).val();
  8. $(&quot;#btn-save&quot;).html(&#39;Please Wait...&#39;);
  9. $(&quot;#btn-save&quot;).attr(&quot;disabled&quot;, true);
  10. // ajax
  11. $.ajax({
  12. type: &quot;POST&quot;,
  13. url: &quot;{{ url(&#39;add-update-piezometer&#39;) }}&quot;,
  14. data: {
  15. id: id,
  16. user_id: user_id,
  17. machine_name: machine_name,
  18. iot_device_id: iot_device_id,
  19. local_device_id: local_device_id,
  20. },
  21. dataType: &#39;json&#39;,
  22. success: function (res) {
  23. window.location.reload();
  24. $(&quot;#btn-save&quot;).html(&#39;Submit&#39;);
  25. $(&quot;#btn-save&quot;).attr(&quot;disabled&quot;, false);
  26. }
  27. });
  28. });

答案2

得分: 0

以下内容应该有所帮助：将其更改为表单确认事件，而不是点击按钮事件。不要忘记编写此代码，以使页面不重新加载：
event.preventDefault();

英文:

The following should help: change to a form confirmation event instead of a Click button event. And do not forget to write this code so that the page does not reload:
event.preventDefault();

huangapple
  • 本文由 发表于 2023年1月9日 14:33:39
  • 转载请务必保留本文链接：https://go.coder-hub.com/75053848.html
  • ajax
  • html
  • javascript
  • laravel
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定