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

Posted 2023-05-09

【中文标题】如何将 jQuery Validate 与我的 aws lambda 函数集成？

【英文标题】：How to integrate jQuery Validate with my aws lambda function?

【发布时间】：2017-10-28 17:14:33

【问题描述】：

我想验证我在浏览器中运行的 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 事件之外运行验证。那我该怎么办？

【参考方案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()) 就像一个魅力一样！！！

【讨论】：

附注：无需重新包装您的 jQuery 对象，例如contactName.val()