ここでフォームはすべての検証が正しいときに送信されます。ラジオボタンと選択ボタンの場合、検証が正しく行われていないため、検証するフィールドはほんの少しですが、フォームは送信されます検証がすべてのフィールドに与えられると... これが私のページです...フォームがAjax経由で送信されない
<form id="contact" name="contact" class="form-horizontal" method="POST" action="">
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">NAME</label>
<div class="col-sm-8">
<input type="text" data-rule-required="true" class="form-control" name="name" id="name" >
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">AGE</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="age" id="age">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">GENDER</label>
<div class="col-sm-8">
<label class="radio-inline">
<input type="radio" name="gender" id="inlineRadio1" value="male" class="required">
Male </label>
<label class="radio-inline">
<input type="radio" name="gender" id="inlineRadio2" value="female">
Female </label>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">OCCUPATION</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="occupation" id="occupation">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">AREA</label>
<div class="col-sm-8">
<select class="form-control required" name="area">
<option selected="selected" value="" >Please Choose</option>
<option value="A.Naranapura">A.Naranapura</option>
<option value="Abshot Layout"> Abshot Layout</option>
<option value="Adugodi"> Adugodi</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-0 col-sm-8">
<button id="send" class="btn btn-default fran">Submit</button>
</div>
</div>
</form>
これは私のAJAX ..です
<script type="text/javascript">
function validateEmail(email) {
var reg = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}
$(document).ready(function() {
$("#contact").submit(function() { return false; });
$("#send").on("click", function(){
var emailval = $("#email").val();
var ageval = $("#age").val();
var nameval = $("#name").val();
var numval = $("#contact-number").val();
var genval = $("#gender").val();
var occuval = $("#occupation").val();
var areaval = $("#area").val();
var mailvalid = validateEmail(emailval);
var namelen=nameval.length;
var genlen=genval.length;
var occculen=occupationval.length;
var addresslen=addressval.length;
var numlen=numval.length;
var arealen=areaval.length;
if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}
if(namelen < 1) {
$("#name").addClass("error");
}
else if(namelen >= 1){
$("#name").removeClass("error");
}
if(genlen < 1) {
$("#gender").addClass("error");
}
else if(genlen >= 1){
$("#gender").removeClass("error");
}
if(addresslen < 1) {
$("#address").addClass("error");
}
else if(addresslen >= 1){
$("#address").removeClass("error");
}
if(occulen < 1) {
$("#occupation").addClass("error");
}
else if(occulen >= 1){
$("#occupation").removeClass("error");
}
if(numlen < 1) {
$("#contact-number").addClass("error");
}
else if(numlen >= 1){
$("#contact-number").removeClass("error");
}
if(arealen < 1) {
$("#area").addClass("error");
}
else if(arealen >= 1){
$("#area").removeClass("error");
}
if(mailvalid == true && namelen >=1 && genlen >= 1 && addresslen >= 1 && occulen >= 1 && numlen >= 1 && arealen >= 1) {
// if both validate we attempt to send the e-mail
// first we hide the submit btn so the user doesnt click twice
$("#send").replaceWith("<em>sending...</em>");
$.ajax({
type: 'POST',
url: 'sendfranchiseemessage.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
alert();
$("#contact").fadeOut("fast", function(){
$(this).before("<p><strong><h1>Success! Your feedback has been sent, thanks :)</h1></strong></p>");
setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
});
});
</script>
コメント行/ * var genlen = genval.length; */ – RJParikh
コード内に問題が多すぎます。例:住所フィールドはフォームにはありません。 genlenフィールドはコメントにあります。ラジオボタンの検証は、あなたが使用する必要がある長さを使用して動作していないかどうかをチェックするかどうかを選択ドロップダウンオプションの値をチェックする!= 0、など... – RJParikh
申し訳ありません...私のコードを参照 –