HTML 单选按钮 JQuery 验证不起作用

问题描述 投票:0回答:1

你好,我正在通过单选按钮开发 5 星评级评论。此单选按钮无法正常工作。我想在 wordpress 中实施。检查图像。 https://i.stack.imgur.com/UR5ED.png。这是单选按钮图片。如果访问者没有给出任何评论,那么验证就可以了。以下代码不起作用。任何人都可以给我任何建议。

代码

jQuery(document).on('click', '#sv_form', function() {

  var timeliness = jQuery('input[name="timeliness"]:checked').value;
  //var timeliness = jQuery('input[name="timeliness"]:checked').val(); 

  if (timeliness === '') {

    jQuery('#valida_error_message').text('*All above Fields are Required');

  } else {

    jQuery.ajax({
      url: ajax_url,
      type: "POST",
      dataType: "JSON",
      //cache: false,
      data: {
        'action': 'vendor_survey_form',
        'timeliness': timeliness,
      },
      success: function(data) {

        if (data.message) {
          jQuery('body #message').html('Message sent successfully');
          jQuery("form").trigger("reset");

        } else {
          jQuery('#survey_error_message').text(data);
          jQuery("form").trigger("reset");
        }

      },
      error: function(errorThrown) {
        console.log(errorThrown);
      }

    });
  }

})
<fieldset class="timeliness">
  <!-- id="no-rate" -->
  <input type="radio" id="timeliness" class="input-no-rate" name="timeliness" value="0" checked="" aria-label="No timeliness.">

  <input type="radio" id="rate1" name="timeliness" value="1" required>
  <label for="rate1">1 tstar</label>

  <input type="radio" id="rate2" name="timeliness" value="2" required>
  <label for="rate2">2 tstar</label>

  <input type="radio" id="rate3" name="timeliness" value="3" required>
  <label for="rate3">3 tstar</label>

  <input type="radio" id="rate4" name="timeliness" value="4">
  <label for="rate4">4 tstar</label>

  <input type="radio" id="rate5" name="timeliness" value="5" required>
  <label for="rate5">5 tstar</label>

  <span class="focus-ring"></span>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascript jquery wordpress jquery-plugins
1个回答
0
投票
<script>
    $(document).ready(function () {
        jQuery(document).on('click', '#sv_form', function () {

            var timeliness = jQuery('input[name="timeliness"]:checked').value;
            //var timeliness = jQuery('input[name="timeliness"]:checked').val(); 

            if (timeliness == '') {

                jQuery('#valida_error_message').html('*All above Fields are 
    Required');

            } else {

                jQuery.ajax({
                    url: ajax_url,
                    type: "POST",
                    dataType: "JSON",
                    //cache: false,
                    data: {
                        'action': 'vendor_survey_form',
                        'timeliness': timeliness,
                    },
                    success: function (data) {

                        if (data.message) {
                            jQuery('body #message').html('Message sent 
     successfully');
                            jQuery("form").trigger("reset");

                        } else {
                            jQuery('#survey_error_message').text(data);
                            jQuery("form").trigger("reset");
                        }

                    },
                    error: function (errorThrown) {
                        console.log(errorThrown);
                    }

                });
            }
        });
    });
</script>
© www.soinside.com 2019 - 2024. All rights reserved.