У меня проблема с отправкой данных с php после validate.js, я много пробовал, но мне не удалось. пожалуйста, посмотрите на код ниже.
Вот пример HTML-формы.
<form id="main" action="#/shd.php" class="form-horizontal" method="post" novalidate>
<div class="box-body">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" id="name" placeholder="Complete Name" required="">
<div class="col-sm-10 messages"></div>
</div>
</div>
</div>
<div class="box-footer">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-success pull-right" >Submit</button>
</div>
Вот последние строки кода проверки
<script>
(function() {
validate.extend(validate.validators.datetime, {
parse: function(value, options) {
return +moment.utc(value);
},
// Input is a unix timestamp
format: function(value, options) {
var format = options.dateOnly ? "YYYY-MM-DD" : "YYYY-MM-DD hh:mm:ss";
return moment.utc(value).format(format);
}
});
// These are the constraints used to validate the form
var constraints = {
name: {
presence: true,
length: {
minimum: 3,
maximum: 20
},
format: {
pattern: "[a-z0-9]+",
flags: "i",
message: "can only contain a-z and 0-9"}
}
};
// Hook up the form so we can prevent it from being posted
var form = document.querySelector("form#main");
form.addEventListener("submit", function(ev) {
ev.preventDefault();
handleFormSubmit(form);
});
// Hook up the inputs to validate on the fly
var inputs = document.querySelectorAll("input, textarea, select")
for (var i = 0; i < inputs.length; ++i) {
inputs.item(i).addEventListener("change", function(ev) {
var errors = validate(form, constraints) || {};
showErrorsForInput(this, errors[this.name])
});
}
function handleFormSubmit(form, input) {
// validate the form aainst the constraints
var errors = validate(form, constraints);
// then we update the form to reflect the results
showErrors(form, errors || {});
if (!errors) {
showSuccess();
}
}
// Updates the inputs with the validation errors
function showErrors(form, errors) {
// We loop through all the inputs and show the errors for that input
_.each(form.querySelectorAll("input[name], select[name]"), function(input) {
// Since the errors can be null if no errors were found we need to handle
// that
showErrorsForInput(input, errors && errors[input.name]);
});
}
// Shows the errors for a specific input
function showErrorsForInput(input, errors) {
// This is the root of the input
var formGroup = closestParent(input.parentNode, "form-group")
// Find where the error messages will be insert into
, messages = formGroup.querySelector(".messages");
// First we remove any old messages and resets the classes
resetFormGroup(formGroup);
// If we have errors
if (errors) {
// we first mark the group has having errors
formGroup.classList.add("has-error");
// then we append all the errors
_.each(errors, function(error) {
addError(messages, error);
});
} else {
// otherwise we simply mark it as success
formGroup.classList.add("has-success");
}
}
// Recusively finds the closest parent that has the specified class
function closestParent(child, className) {
if (!child || child == document) {
return null;
}
if (child.classList.contains(className)) {
return child;
} else {
return closestParent(child.parentNode, className);
}
}
function resetFormGroup(formGroup) {
// Remove the success and error classes
formGroup.classList.remove("has-error");
formGroup.classList.remove("has-success");
// and remove any old messages
_.each(formGroup.querySelectorAll(".help-block.error"), function(el) {
el.parentNode.removeChild(el);
});
}
// Adds the specified error with the following markup
// <p class="help-block error">[message]</p>
function addError(messages, error) {
var block = document.createElement("p");
block.classList.add("help-block");
block.classList.add("error");
block.innerText = error;
messages.appendChild(block);
}
function showSuccess() {
// We made it \:D/
alert("Success!");
return true;
}
})();
</script>
Когда я нажимаю кнопку «Подтвердить» после проверки, ничего не происходит !! Любой, кто имеет опыт работы с этим кодом validata.js, поделится вашей идеей.
Так что вы можете сделать что-то вроде этого
function submitForm( e ) {
e.preventDefault();
//DO your validation stuff
//if validation === TRUE
$('#main').submit();// only this line was the solution.
};
Так с preventDefault
действие по умолчанию для события не будет запущено, и когда вы нажмете кнопку отправки, вы сможете выполнить проверку перед отправкой данных.
Других решений пока нет …