使用jQuery进行表单下拉验证

时间:2019-05-31 18:25:43

标签: javascript jquery html css

我已经为表单建立了一些验证,但是我无法使用下拉菜单来进行验证部分。有人有想法吗?

电子邮件部分会进行验证,并且提交按钮会阻止表单提交,直到验证通过为止。

enter image description here

  groupBy(origArray: any[], key: string) {
    return origArray.reduce(function (rv, x) {
      (rv[x[key]] = rv[x[key]] || []).push(x);
      return rv;
    }, {});
  }
$(document).ready(function() {
  $('input[name=requestType]').click(function() {
    if (this.value == 'Single User') {
      $(".groupName").hide();
      $(".totalUsers").hide();
      $("#both1").hide();
    } else {
      $(".groupName").show();
      $(".totalUsers").show();
      $("#both1").show();
    }
  });

  $("#submit").click(function() {
    if (validate()) {
      AddListItem();
      return false;
    } else {
    }
  });
});

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

function validate() {
  var valid = false;
  var $result = $("#result");
  var email = $("#requesterEmail").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text("This email address is valid.");
    $result.css("color", "green");
    valid = true;
  } else {
    $result.text("Please provide a valid email address.");
    $result.css("color", "red");
  }
  return valid;
}

function getItem() {

  var item = {
    Title: $("#requesterEmail").val(),
    TeamName: $("#groupName").val(),
    NumberOfAttendees: $("#totalUsers").val(),
    RequestType: $("input[name=requestType]:checked").val(),
    SessionType: $('#rChoices :selected').text(),
    ComputerType: $("input[name=computerType]:checked").val()
  };
  return item;
}

function AddListItem(resources) {

  var item = getItem();

  $pnp.setup({
    baseUrl: "/Training/"
  });

  $pnp.sp.web.lists.getByTitle("Training").items.add(item).then(function(r) {
    $("#submit").hide();
    $(".form").hide();
    $("#divider").hide();
    $(".submitHide").hide();
    $("#mText").hide();
    $("#header").hide();
    $("#test").hide();
    $("#DeltaPlaceHolderPageTitleInTitleArea").hide();
    $("#hidden_div").show();
    $("#cancel").hide();
  });
}

我将非常感谢我为此提供的所有帮助。

0 个答案:

没有答案