2017-05-28 58 views
0

我想驗證我在瀏覽器中運行的aws lambda函數。我想使用jQuery驗證插件來驗證在網頁上提交的輸入數據。但是,我一直無法使它工作。如何整合jQuery驗證與我的aws lambda函數?

這裏是我的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()) {}工作就像一個魅力!

+0

備註:無需重新包裝您的jQuery對象,例如'contactName.val()' – Mikey