Javascript 检查HTML表单中的响应数

因此，我需要验证课程是否有标题，是否检查了3个SLO。我有一个Javascript代码片段，可以确保我的代码不超过3个，但是如何确保我有3个，并且课程描述中有相关信息呢

here is my code: 
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
   if($(this).siblings(':checked').length >= limit) {
       this.checked = false;
   }
});


function submitUser(className, slo){
$(function() {
    $.ajax({
        cache:false,
        type: 'POST',
        url: '/echo/json/',
        data: {
            json:'{"Course":className,"SLO":slo}'
        },
        success: function(data) {
            $('#ajax-json').html(data.Course);
            $('#ajax-html').html(data.SLO);
        },
        error:function(error){
            alert('there was an error');  
        },
        dataType: 'json'
    });


    });
}

我的HTML如下所示：

       <div class="pricing-levels-3">
       Course Title: <input class = "text" name = "course" id = "name" value = " "><br>
          <p><strong> Select 3 SLO Outcomes</strong></p>
          <input class="single-checkbox"type="checkbox" name="vehicle" value="SLO1">SLO1
          <input class="single-checkbox" type="checkbox" name="vehicle" value="SLO2">SLO2
          <input class="single-checkbox" type="checkbox" name="vehicle" value="SLO3">SLO3
          <input class="single-checkbox" type="checkbox" name="vehicle" value="SLO4">SLO4
          <input class="single-checkbox" type="checkbox" name="vehicle" value="SLO5">SLO5
          <input class="single-checkbox" type="checkbox" name="vehicle" value="SLO5">SLO6<br><br>
          Upload Artifacts:<br>
          Artifact 1: <input type = "file" name ="ArtifactOne"><br>
          Artifact 2: <input type = "file" name ="ArtifactTwo"><br>
          Artifact 3: <input type = 'file' name ="ArtifactThree"> <br>
          <br>
           <button id="btn" onclick="submitUser(document.getElementById('name').value, document.getElementByName('vehicle').value)">Create Class</button>
          </div></form>

  <div id="ajax-json"></div>
 <div id="ajax-html"></div>

课程名称：

选择3个SLO结果

SLO1
SLO2
SLO3
SLO4
SLO5
SLO6


上载工件：

工件1:

工件2:

工件3:



创建类

无论何时提交，都会出现以下错误：

{“错误”：“缺少密钥：标题”}

关于如何让它工作有什么建议吗？不需要花哨，我只需要一个“是的，你拥有一切”或“不，你没有一切”

这是我的JSFIDLE页面：

---

根据错误消息，您发出请求时可能来自服务器。在该功能中：

function submitUser(className, slo){
  $(function() {
    $.ajax({
      cache:false,
      type: 'POST',
      url: '/echo/json/',
      data: {
        json:'{"Course":className,"SLO":slo}'
      },
      success: function(data) {
        $('#ajax-json').html(data.Course);
        $('#ajax-html').html(data.SLO);
      },
      error:function(error){
        alert('there was an error');  
      },
      dataType: 'json'
    });
  });
}

…请注意，您要传递的

数据将包含以下文字字符串值：

{"Course":className,"SLO":slo}

…这不是你想要的。相反，您希望传递包含传递给函数的参数的JSON。您尚未发布此
/echo/json
服务器端代码的实现，因此很难确定如何修复此问题，但我的最佳猜测是，您希望设置传递给
$的
数据
属性。ajax
如下所示：

$.ajax({
  // ...
  data: {
    json: {
      Course: className,
      SLO: slo
    }
  },
  // ...
});

这里的区别在于，您传递的对象使用的是实际参数，而不是包含参数名称的字符串。jQuery应该为您将
数据
对象转换为JSON字符串。
我不太明白.ajax是什么，我是从另一篇堆栈溢出文章中复制的。我对html或java一无所知。
var limit=3$（'input.single checkbox'）.on（'change'，function（evt）{if（$（this）.hibers（':checked'）.length>=limit）{this.checked=false；}}}）；函数submitUser（className，slo）{$（function（）{if（className==“”）{console.log（“需要类标题”）；}if（length！=3）{console.log（“需要3个slo”）；}}