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

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

HTML required attribute not working with AJAX submission

问题

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

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

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

<div class="modal fade hide" id="ajax-book-model" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ajaxBookModel">Add New Machine</h5>
        <!-- <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
         <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" onClick="window.location.reload();">
      </div>
      <div class="modal-body">
      <form action="javascript:void(0)" id="addEditBookForm" name="addEditBookForm" class="form-horizontal" method="POST">
         <input type="hidden" name="id" id="id">
         <input type="hidden" name="user_id" id="user_id" value="{{ Auth::user()->id }}">
        <div class="row">
           <div class="col-sm-12 col-md-4">
            <div class="form-group">     
              <label>Name</label>
              <input type="text" id="machine_name" name="machine_name" class="form-control form-control-sm" placeholder="Enter Machine Name" required>
              <span class="text-danger">{{ $errors->first('machine_name') }}</span>
            </div>
           </div>
            <div class="col-sm-12 col-md-4">
            <div class="form-group">     
              <label>IOT Device ID</label>
              <input type="text" id="iot_device_id" name="iot_device_id" class="form-control form-control-sm" placeholder="Enter IOT Device ID" required>
            </div>
           </div>
            <div class="col-sm-12 col-md-4">
            <div class="form-group">     
              <label>Local device ID</label>
              <input type="text" id="local_device_id" name="local_device_id" class="form-control form-control-sm" placeholder="Enter Local Device ID" required>
            </div>
           </div>
        </div>
      </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-gradient-danger mb-2" data-dismiss="modal" onClick="window.location.reload();">Close</button>
        <button type="submit" id="btn-save" value="addNewBook" class="btn btn-sm btn-gradient-danger mb-2">Save</button>
      </div>
      </form>
    </div>
  </div>
</div>

以下是您提供的AJAX代码:

$('body').on('click','#btn-save', function (event){
      event.preventDefault();
          var id = $("#id").val();
          var user_id = $("#user_id").val();
          var machine_name = $("#machine_name").val();
          var iot_device_id = $("#iot_device_id").val();
          var local_device_id = $("#local_device_id").val();
          $("#btn-save").html('Please Wait...');
          $("#btn-save").attr("disabled", true);
         
        // ajax
        $.ajax({
            type:"POST",
            url: "{{ url('add-update-piezometer') }}",
            data: {
              id:id,
              user_id:user_id,
              machine_name:machine_name,
              iot_device_id:iot_device_id,
              local_device_id:local_device_id,
            },
            dataType: 'json',
            success: function(res){
             window.location.reload();
            $("#btn-save").html('Submit');
            $("#btn-save").attr("disabled", false);
           }
        });
    });

我只是想要在使用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

&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;
&lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h5 class=&quot;modal-title&quot; id=&quot;ajaxBookModel&quot;&gt;Add New Machine&lt;/h5&gt;
&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;
&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;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&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;
&lt;input type=&quot;hidden&quot; name=&quot;id&quot; id=&quot;id&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;user_id&quot; id=&quot;user_id&quot; value=&quot;{{ Auth::user()-&gt;id }}&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;     
&lt;label&gt;Name&lt;/label&gt;
&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;
&lt;span class=&quot;text-danger&quot;&gt;{{ $errors-&gt;first(&#39;machine_name&#39;) }}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;     
&lt;label&gt;IOT Device ID&lt;/label&gt;
&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;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;     
&lt;label&gt;Local device ID&lt;/label&gt;
&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;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&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;
&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;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;   

and this is ajax code

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

 $(&#39;body&#39;).on(&#39;click&#39;,&#39;#btn-save&#39;, function (event){
event.preventDefault();
var id = $(&quot;#id&quot;).val();
var user_id = $(&quot;#user_id&quot;).val();
var machine_name = $(&quot;#machine_name&quot;).val();
var iot_device_id = $(&quot;#iot_device_id&quot;).val();
var local_device_id = $(&quot;#local_device_id&quot;).val();
$(&quot;#btn-save&quot;).html(&#39;Please Wait...&#39;);
$(&quot;#btn-save&quot;). attr(&quot;disabled&quot;, true);
// ajax
$.ajax({
type:&quot;POST&quot;,
url: &quot;{{ url(&#39;add-update-piezometer&#39;) }}&quot;,
data: {
id:id,
user_id:user_id,
machine_name:machine_name,
iot_device_id:iot_device_id,
local_device_id:local_device_id,
},
dataType: &#39;json&#39;,
success: function(res){
window.location.reload();
$(&quot;#btn-save&quot;).html(&#39;Submit&#39;);
$(&quot;#btn-save&quot;). attr(&quot;disabled&quot;, false);
}
});
});

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

答案1

得分: 4

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

$('body').on('submit', '#addEditBookForm', function (event) {

    event.preventDefault();
    var id = $("#id").val();
    var user_id = $("#user_id").val();
    var machine_name = $("#machine_name").val();
    var iot_device_id = $("#iot_device_id").val();
    var local_device_id = $("#local_device_id").val();
    $("#btn-save").html('请稍等...');
    $("#btn-save").attr("disabled", true);

    // ajax
    $.ajax({
        type: "POST",
        url: "{{ url('add-update-piezometer') }}",
        data: {
            id: id,
            user_id: user_id,
            machine_name: machine_name,
            iot_device_id: iot_device_id,
            local_device_id: local_device_id,
        },
        dataType: 'json',
        success: function (res) {
            window.location.reload();
            $("#btn-save").html('提交');
            $("#btn-save").attr("disabled", false);
        }
    });
});
英文:

Try changing your btn click event to form submit event.

$(&#39;body&#39;).on(&#39;submit&#39;, &#39;#addEditBookForm&#39;, function (event) {
event.preventDefault();
var id = $(&quot;#id&quot;).val();
var user_id = $(&quot;#user_id&quot;).val();
var machine_name = $(&quot;#machine_name&quot;).val();
var iot_device_id = $(&quot;#iot_device_id&quot;).val();
var local_device_id = $(&quot;#local_device_id&quot;).val();
$(&quot;#btn-save&quot;).html(&#39;Please Wait...&#39;);
$(&quot;#btn-save&quot;).attr(&quot;disabled&quot;, true);
// ajax
$.ajax({
type: &quot;POST&quot;,
url: &quot;{{ url(&#39;add-update-piezometer&#39;) }}&quot;,
data: {
id: id,
user_id: user_id,
machine_name: machine_name,
iot_device_id: iot_device_id,
local_device_id: local_device_id,
},
dataType: &#39;json&#39;,
success: function (res) {
window.location.reload();
$(&quot;#btn-save&quot;).html(&#39;Submit&#39;);
$(&quot;#btn-save&quot;).attr(&quot;disabled&quot;, false);
}
});
});

答案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
匿名

发表评论

匿名网友

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

确定