PHP又是一个JS新手。
我使用ajax JS来操作脚本，但无法使内联错误消息正常工作，所以我废弃了这个想法并使用了HTML5验证。
我用JS表示：
<script>
(function() {
$('form').ajaxForm({
beforeSubmit: function() {
//return $('#mailForm').validate().form();
$("#mailForm").validate({
rules: {
name: {
required: true,
minlength : 2
},
name2: {
required: true,
minlength : 2
},
"ic-passport": {
required: true,
minlength : 6
},
phone: {
required : true,
number:true,
minlength : 10,
maxlength : 13
},
city: {
required: true,
minlength : 4
},
email:{
required: true,
email: true
},
dob: {
required: true,
date: true
minlength : 4
},
sex: {
required: true,
},
tpt: {
required: true,
},
licence: {
required: true,
},
travel: {
required: true,
},
language: {
required: true,
},
ethnicity: {
required: true,
},
religion: {
required: true,
},
age: {
required: true,
},
"hair-colour": {
required: true,
},
"hair-length": {
required: true,
},
"eye-colour": {
required: true,
},
height: {
required: true,
},
weight: {
required: true,
},
image1: "required",
bio: "required",
experience: "required",
femail:{
required: true,
email: true
}
},
messages: {
name: {
required:"Please enter your name",
minlength: "Please enter a valid name"
},
name2: {
required:"Please enter your name",
minlength: "Please enter a valid name"
},
"ic-passport": {
required:"Please enter your IC/Passport Number",
minlength: "Please enter a valid IC/Passport Number"
},
phone: {
required: "Please enter your phone number",
minlength: "Please enter your valid phone number",
maxlength: "Please enter your valid phone number"
},
city: {
required: "Please enter your City/Town & State",
minlength: "Please enter your valid City/Town & State",
},
email:{
required: "Please enter your email",
minlength: "Please enter a valid email address",
},
dob:{
required: "Please enter your Date of Birth",
minlength: "Please enter a valid Date of Birth",
},
sex:{
required: "Please select your Gender",
},
tpt:{
required: "Please select if you own Transport",
},
licence:{
required: "Please select if you own a Licence",
},
travel:{
required: "Please select if you are willing to Travel",
},
language:{
required: "Please select what Language you speak",
},
ethnicity:{
required: "Please enter your Ethnicity",
},
religion:{
required: "Please enter your Religion",
},
age:{
required: "Please enter your Age",
},
"hair-colour":{
required: "Please enter your Hair Colour",
},
"hair-length":{
required: "Please select your Hair Length",
},
"eye-colour":{
required: "Please enter your Eye Colour",
},
height:{
required: "Please enter your Height",
},
weight:{
required: "Please enter your Weight",
},
image1: "Please Choose at least 1 Photo",
bio: "Please enter your Bio",
experience: "Please enter your Experience",
femail: {
required: "Please enter your email",
minlength: "Please enter a valid email address",
}
},
debug: true,
errorElement: "em",
errorContainer: $("#warning, #summary"),
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
},
success: function(label) {
label.text("ok!").addClass("success");
}
});
var flag= $('#mailForm').valid();
if(!flag){
return false;
}
},
success: function(msg) {
alert(msg);
//$("#mailForm").addClass("hide");
//$("#message1").show();
},
complete: function(xhr) {
$("#mailForm").addClass("hide");
$("#message1").show();
$('#status').html(xhr.responseText);
}
});
$('#close').click(function(){
$('#message1').hide();
$("#mailForm").removeClass("hide");
$('input[type=text],input[type=email],textarea,input[type=tel],input[type=date],input[type=url],input[type=file]').val('');
location.reload();
});
})();
</script>
现在我有了这个脚本：
<script>
var input = document.getElementById('surname');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Last Name, minimum 2 characters');
}
var input = document.getElementById('name');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your First Name');
}
var input = document.getElementById('nric');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your NRIC or Passport number');
}
var input = document.getElementById('phone');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Phone number using format shown');
}
var input = document.getElementById('whatsapp');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Whatsapp using format shown');
}
var input = document.getElementById('city');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your City/Town and State');
}
var input = document.getElementById('email');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter a valid E-mail address as shown');
}
var input = document.getElementById('femail');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter a valid E-mail address as shown');
}
var input = document.getElementById('dob');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your date of birth as shown');
}
var input = document.getElementById('sex');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please select your Gender');
}
var input = document.getElementById('tpt');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please select if you own Transport');
}
var input = document.getElementById('licence');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please select if you have a licence');
}
var input = document.getElementById('licence');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please select if you have a licence');
}
var input = document.getElementById('language');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your spoken lanuage/s');
}
var input = document.getElementById('race');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Ethnicity');
}
var input = document.getElementById('religion');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Religion');
}
var input = document.getElementById('age');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Age');
}
var input = document.getElementById('haircolour');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Haircolour');
}
var input = document.getElementById('hairlength');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please select your Hair Length');
}
var input = document.getElementById('eyes');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Eye Colour');
}
var input = document.getElementById('height');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Height');
}
var input = document.getElementById('weight');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Weight');
}
var input = document.getElementById('image1');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please choose a suitable photo, min 5 required');
}
var input = document.getElementById('image2');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please choose a suitable photo, min 5 required');
}
var input = document.getElementById('image3');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please choose a suitable photo, min 5 required');
}
var input = document.getElementById('image4');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please choose a suitable photo, min 5 required');
}
var input = document.getElementById('bio');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your Bio');
}
var input = document.getElementById('experience');
input.oninvalid = function(event) {
event.target.setCustomValidity('Please enter your detailed Experience');
}
</script>
但是现在我不知道如何让表单回复mail.php并像我之前那样对其进行操作。
任何帮助将不胜感激。感谢您阅读并向新手提供一些帮助。