Question

我有一个动态表单，所以我不知道每次都会有哪种输入，我需要处理它，所以我做了类似的事情

 var data = [{
            "db": "DT_INI_PROC",
            "prv_value": "",
            "nxt_value": "",
            "diagnostic": "",
            "datatype": "date"
          },
          {
            "db": "DSP_PROC",
            "prv_value": "",
            "nxt_value": "",
            "diagnostic": ""
          },
          {
            "db": "DESCRICAO",
            "prv_value": "",
            "nxt_value": "",
            "diagnostic": ""
          }],
  result = data.reduce((p,c) => (p.db += "," + c.db,p)).db;
console.log(result);

并且我不得不这样做，因为某种形式的事件被阻止了（即使我没有使用<div id="repond-questionnaire" class="modal fade in" style="display: block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Questionnaire de Test</h4> </div> <div class="modal-body" id="questionnaire_here"> <form method="post" id="questionnaire_form"> <div class="form-group"> <label for="text"><h3>Who are you?</h3></label> <textarea type="text" name="80" class="form-control" rows="3" placeholder="Text..." required="" value=""></textarea> </div> <div class="form-group"> <label for="focusedInput"><h3>How old are you?</h3></label> <input type="number" name="81" class="form-control" placeholder="Number..." required="" value=""> </div> <div class="form-group"> <label for="focusedInput"><h3>What is your email?</h3></label> <input type="email" name="82" class="form-control" placeholder="Email..." required="" value=""> </div> <div class="form-group"> <label for="focusedInput"><h3>Do you like our website?</h3></label> <div class="radio"> <label class="input-lg"><input type="radio" name="83" value="Oui">Oui</label> </div> <div class="radio"> <label class="input-lg"><input type="radio" name="83" value="Non">Non</label> </div> </div> <input type="submit" name="sumbit" id="sumbit" value="Sumbit" class="btn btn-success"></form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script> $(document).ready(function() { $('#repond-questionnaire').on('click', '#sumbit', function() { // here i need to check if all inputs are empty or not //check if they have a valid input or not for security //because after i will send everything and upload them to the data base $.ajax({ url: "user/sumbit_answers.php", method: "POST", data: $('#questionnaire_form').serialize(), beforeSend: function() { $('#sumbit').val("Sumbiting..."); }, success: function(data) { $('#questionnaire_form')[0].reset(); if (data == 'exit_failure') { alert("something wrong happened"); } else { $('#questionnaire_here').empty(); $('#questionnaire_here').html(data); } } }); }); $('#repond-questionnaire').on('click', '#close', function(event) { $('#questionnaire_here').empty(); }); }); </script>，我的表单输入都是这样的

event.preventdefault()

Answer 1

鉴于已在required内的<input>个元素设置了<form>属性，您可以使用.checkValidity()个<form>元素。

此外，您可以在pattern RegExp中添加[^\s]+属性，以至少要求<input>元素的单个字符。调整RegExp以满足要求。

<form name="form">
  <input name="input1" type="text" pattern="[^\s]+" required>
  <input name="input2" type="text" pattern="[^\s]+" required>
  <input type="submit">
</form>
<script>
  document.forms.form.querySelector("[type=submit]")
  .onclick = function() {
    console.log(this.form.checkValidity());
    // if (this.form.checkValidity()) { /* all <input> elements have `.value */ }
    // else { /* all <input> elements do not have `.value */ }
  }
</script>

Answer 2

var text_input=$("[type=text]");
var password_input=$("[type=password");
var radio_input=$("[type=radio]");
var checkbox_input=$("[type=checkbox]");
var select=$("<select>");
var textarea=$("<textarea>");

然后你必须为每个人做循环检查并根据该字段应用你的验证

验证后调用ajax（以下链接可以帮助您） jQuery Form Validation before Ajax submit

检查表单中的输入是否为空

2 个答案: