JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<form action="" method="post" class="validateForm">
<label for="firstname">firstname</label>
<span class="validateMe">
<input type="text" name="firstname" id="firstname" class="required">
</span>
<br/>
<label for="firstname">secondname</label>
<input type="text" name="secondname" id="secondname">
<button data-url="/draaiboek-frontend/poc/hotel/step2" data-event="next" class="event button green" type="submit">next</button>
</form>
<div id="ajaxContainer"></div>
JavaScript
(function($) {
var validationOptions = {
ignore: '',
wrapper: "div",
errorElement: "div",
errorClass: "message",
errorPlacement: function(error, element) {
error.insertAfter(element.parents("span"));
error.addClass('error');
},
rules: {},
messages: {},
};
var data = '<form action="" method="post" class="validateForm">' + '<label for="firstname">firstname</label>' + '<span class="validateMe">' + '<input type="text" name="firstname" id="firstname" class="required">' + '</span>' + '<br/>' + '<label for="firstname">secondname</label>' + '<input type="text" name="secondname" id="secondname">' + '<button data-url="/draaiboek-frontend/poc/hotel/step2" data-event="next" class="event button green" type="submit">next</button>' + '</form>';
$(document).ready(function() {
var $form = $('.validateForm'),
$required = $('input.required', $form);
var ajaxTaskContainer = $("#ajaxTaskContainer");
function setValidationRules() {
$(this).rules("add", {
required: true,
messages: {
required: "Dit veld is verplicht."
}
});
}
function ajaxSuccess(data) {
console.log(data);
$('#ajaxContainer').html(data);
}
$(document).on("click", ".event", function(e) {
e.preventDefault();
var formData = $('#ajaxTaskContainer form');
var formEvent = $(this).attr("data-event");
var dataUrl = $(this).attr("data-url");
$(ajaxTaskContainer).empty().html('<span class="ajaxLoader">');
$.ajax({
type: "POST",
url: '/echo/html/',
data: {
html: data,
delay: 1
},
cache: false,
success: ajaxSuccess
});
...