Question

为什么没有验证我的联系方式中的选择选项？我尝试使用此js代码，但不适用于所选代码，仅适用于输入和textarea。我需要在此处进行更改才能使其正常工作？谢谢帮手。

jQuery(document).ready(function($) {
  "use strict";

  //Contact
  $('form.contactForm').submit(function() {
    var f = $(this).find('.form-group'),
      ferror = false,
      emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;

    f.children('input').each(function() { // run all inputs

      var i = $(this); // current input
      var rule = i.attr('data-rule');

      if (rule !== undefined) {
        var ierror = false; // error flag for current input
        var pos = rule.indexOf(':', 0);
        if (pos >= 0) {
          var exp = rule.substr(pos + 1, rule.length);
          rule = rule.substr(0, pos);
        } else {
          rule = rule.substr(pos + 1, rule.length);
        }

        switch (rule) {
          case 'required':
            if (i.val() === '') {
              ferror = ierror = true;
            }
            break;

          case 'minlen':
            if (i.val().length < parseInt(exp)) {
              ferror = ierror = true;
            }
            break;

          case 'email':
            if (!emailExp.test(i.val())) {
              ferror = ierror = true;
            }
            break;

          case 'checked':
            if (! i.is(':checked')) {
              ferror = ierror = true;
            }
            break;

          case 'regexp':
            exp = new RegExp(exp);
            if (!exp.test(i.val())) {
              ferror = ierror = true;
            }
            break;
        }
        i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
      }
    });
    f.children('select').each(function() { // run all inputs

      var i = $(this); // current input
      var rule = i.attr('data-rule');

      if (rule !== undefined) {
        var ierror = false; // error flag for current input
        var pos = rule.indexOf(':', 0);
        if (pos >= 0) {
          var exp = rule.substr(pos + 1, rule.length);
          rule = rule.substr(0, pos);
        } else {
          rule = rule.substr(pos + 1, rule.length);
        }

        switch (rule) {
          case 'required':
            if (i.val() === '') {
              ferror = ierror = true;
            }
            break;
        i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
      }
    });
    f.children('textarea').each(function() { // run all inputs

      var i = $(this); // current input
      var rule = i.attr('data-rule');

      if (rule !== undefined) {
        var ierror = false; // error flag for current input
        var pos = rule.indexOf(':', 0);
        if (pos >= 0) {
          var exp = rule.substr(pos + 1, rule.length);
          rule = rule.substr(0, pos);
        } else {
          rule = rule.substr(pos + 1, rule.length);
        }

        switch (rule) {
          case 'required':
            if (i.val() === '') {
              ferror = ierror = true;
            }
            break;

          case 'minlen':
            if (i.val().length < parseInt(exp)) {
              ferror = ierror = true;
            }
            break;
        }
        i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
      }
    });
    if (ferror) return false;
    else var str = $(this).serialize();
    var action = $(this).attr('action');
    if( ! action ) {
      action = 'mail/mail.php';
    }
    $.ajax({
      type: "POST",
      url: action,
      data: str,
      success: function(msg) {
        // alert(msg);
        if (msg == 'OK') {
          $('#hide-button').addClass("hide");
          $("#sendmessage").addClass("show");
          $("#errormessage").removeClass("show");
          $('.contactForm').find("input, textarea").val("");
        } else {
          $('#hide-button').removeClass("hide");
          $("#sendmessage").removeClass("show");
          $("#errormessage").addClass("show");
        }

      }
    });
    return false;
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form row">
  <div class="col-lg-12 text-center">
    <form action="" method="post" role="form" class="contactForm">
    <div class="row">
      <div class="col-lg-6 mb-4">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Your Name*" name="name" id="name" data-rule="minlen:3" data-msg="Please enter at least 3 chars">
          <div class="validation"></div>
        </div>
      </div>
      <div class="col-lg-6 mb-4">
        <div class="form-group">
          <input type="email" class="form-control" placeholder="Your Email*" name="email" id="email" data-rule="email" data-msg="Please enter a valid Email">
          <div class="validation"></div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="form-group mb-4">
          <input type="tel" class="form-control" placeholder="Phone Number*" name="tel" id="tel" data-rule="minlen:10" data-msg="Please enter a valid Phone Number">
          <div class="validation"></div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="form-group mb-4">
          <select class="form-control" name="service" id="service" data-rule="required" data-msg="Please select a service">
            <option selected disabled value="Select Service">Select Service</option>
            <option value="Bathroom Remodeling">Bathroom Remodeling</option>
            <option value="Kitchen Remodeling">Kitchen Remodeling</option>
            <option value="New Renovation/Construction">New Renovation/Construction</option>
            <option value="Luxury Home">Luxury Home</option>
          </select>
        <div class="validation"></div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="form-group mb-4">
          <input type="text" class="form-control" placeholder="Location" name="address" id="address">
          <div class="validation"></div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="form-group mb-4">
          <textarea name="message" class="form-control" placeholder="Message" name="message" id="message"></textarea>
          <div class="validation"></div>
        </div>
      </div>
      <div id="hide-button" class="col-12">
        <button type="submit" class="btn btn-primary">Submit Now</button>
      </div>
      <div class="col-lg-10 offset-lg-1 text-center mt-4">
        <div id="sendmessage">Your message has been sent. Thank you!</div>
        <div id="errormessage">Sorry! Something went wrong. Try again.</div>
      </div>
    </div>
    </form>
  </div>
</div>

Answer 1

使用此功能对其进行修复：

function JSFunctionValidate() {
if(document.getElementById('service').selectedIndex == 0) {
    alert("Please select service");
    return false;
}
return true;
}

让我知道。

Answer 2

也许select已经选择了一个非空值，因此不会触发错误条件。您的页面具有：

<option selected disabled value="Select Service">Select Service</option>

将value属性设置为空字符串：

<option selected disabled value="">Select Service</option>

如何验证我的联系方式中的选择选项？

2 个答案: