如何将 jQuery Validate 与我的 aws lambda 函数集成？

Question

我想验证我在浏览器中运行的 aws lambda 函数。我想使用 jQuery 验证插件来验证网页上提交的输入数据。但是，我无法让它工作。

这是我的 lambda 函数：

$('#contact-form-button').on('click', function (e) {
  AWS.config.update({ region: 'us-east-1' });
  AWS.config.credentials = new AWS.Credentials('<aws credential>', '<aws credential>');
  var lambda = new AWS.Lambda({ region: 'us-east-1', apiVersion: '2015-03-31' }),
    contactName = $('#contact_name'),
    contactEmail = $('#contact_email'),
    contactPhone = $('#contact_phone'),
    contactSubject = $('#contact_subject'),
    contactMessage = $('#contact_message');

  /*Feedback Form DynamoDB Table Data*/
  var pullParams = {
    FunctionName: 'grouve-marketing-web-dev-createFeedback',
    InvocationType: 'RequestResponse',
    LogType: 'Tail',
    Payload: JSON.stringify({
      "feedback_id": makeid(),
      "name": $(contactName).val(),
      "email": $(contactEmail).val(),
      "phone": $(contactPhone).val(),
      "subject": $(contactSubject).val(),
      "message": $(contactMessage).val()
    })
  };


  lambda.invoke(pullParams, function (error, data) {
    if (error) {
      prompt(error);
    } else {
      pullEmailResults = JSON.parse(data.Payload);
    }
  });
  var pullEmailResults;

  return false;
});

这是我的 jquery 验证代码

 $('#contact_form').validate({
        rules: {
            "contact_email": {
                required: true,
                email: true
            },
            "contact_phone": {
                required: true,
                phoneUS: true
            }
        },
        messages: {
             "contact_name": {
                required: "nter your name"
            },
            "contact_email": {
                required: "Enter a valid email"
            },
            "contact_phone": {
                required: "Enter a valid phone number"
            },
            "contact_subject": {
                required: "Enter a subject"
            },
            "contact_message": {
                required: "Enter your message"
            }
        }      
    });

我曾尝试使用success: 和submitHandler 方法，但都不起作用。而且我无法在click 事件之外运行验证。那我该怎么办？

Answer 1

所以这就是我能够真正简单地解决问题的方法！！！

$(document).ready(function() {
  $('#event-start-month').change(function(e) {
    console.log("Start month selected");
    if ($('#event-start-month').val() < 05) {
      $('#event-end-year option[value="2017"]').remove();
    } else if ($('#event-start-month').val() > 05) {
      $('#event-end-year option:first').after('<option value="2017">2017</option>');
    }
  });
  $('#contact_form').validate({
    rules: {
      "contact_email": {
        required: true,
        email: true
      },
      "contact_phone": {
        required: true,
        phoneUS: true
      }
    },
    messages: {
      "contact_name": {
        required: "nter your name"
      },
      "contact_email": {
        required: "Enter a valid email"
      },
      "contact_phone": {
        required: "Enter a valid phone number"
      },
      "contact_subject": {
        required: "Enter a subject"
      },
      "contact_message": {
        required: "Enter your message"
      }
    }
  });

  $('#contact-form-button').on('click', function(e) {
    if ($('#contact_form').valid()) {
      AWS.config.update({
        region: 'us-east-1'
      });
      AWS.config.credentials = new AWS.Credentials('<aws credential>', '<aws credential>');
      var lambda = new AWS.Lambda({
          region: 'us-east-1',
          apiVersion: '2015-03-31'
        }),
        contactName = $('#contact_name'),
        contactEmail = $('#contact_email'),
        contactPhone = $('#contact_phone'),
        contactSubject = $('#contact_subject'),
        contactMessage = $('#contact_message');

      /*Feedback Form DynamoDB Table Data*/
      var pullParams = {
        FunctionName: 'grouve-marketing-web-dev-createFeedback',
        InvocationType: 'RequestResponse',
        LogType: 'Tail',
        Payload: JSON.stringify({
          "feedback_id": makeid(),
          "name": $(contactName).val(),
          "email": $(contactEmail).val(),
          "phone": $(contactPhone).val(),
          "subject": $(contactSubject).val(),
          "message": $(contactMessage).val()
        })
      };


      lambda.invoke(pullParams, function(error, data) {
        if (error) {
          prompt(error);
        } else {
          pullEmailResults = JSON.parse(data.Payload);
        }
      });
      var pullEmailResults;
    }
    return false;
  });
});

只要使用 if ($('#contact_form').valid()) {} 就像一个魅力一样！！！