jQuery 유효성 검사 및 AJAX가있는 부트 스트랩 문의 양식

Question

AJAX 및 jQuery 유효성 검사로 구현하려는 간단한 부트 스트랩 문의 양식이 있습니다. 나는 내가 거의 가깝다고 느낀다. 그러나 나는 일을 제대로 할 수없는 몇 가지 것들이있다. 양식은 입력에 따라 유효성을 검사하지만 (이상적으로 전화 번호가 숫자로 확인되기를 바랍니다. 그러나 양식 유효성 검사 팀에 문의하는 것이 좋습니다) 답변이 올바르지 않더라도 연락처 양식은 계속 보내집니다. 또한 성공 상자는 양식이 제출 된 후에 항상 팝업으로 나타납니다 ... 양식을 잘못 기입하면 보내지 말고 성공 대신 오류 상자를 표시하고 싶습니다. 또한 전자 메일은 메시지 본문을 통해 보내지 만 변수가 전송되지 않습니다.
이름 :
이메일 :
전화 :
메시지 : 어떤 변수로

각 뒤에 표시 그래서 내 메시지의 본문처럼 보인다.

나는 이것이 단순한 무언가일지도 모른다는 것을 알고 있지만, 나는 검증을하기에 매우 새롭고 나 자신의 삶을 위해 그것을 이해할 수 없다.

$status = array(
    'type' => 'success', 
    'message' => 'Email sent!' 
); 

$val = $_POST['val']; 
$toemail = 'myemail@gmail.com'; 
$name = $_POST['name']; 
$email = $_POST['email']; 
$phone = $_POST['phone']; 
$msg = $_POST['message']; 

$subject = 'Thelliotgroup Information Request'; 

$headers = "From: Thelliotgroup Website :: " . $email . "\r\n"; 
$headers .= "MIME-Version: 1.0\r\n"; 
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; 

$message = "<b>Name: </b>" . $name . "<br>"; 
$message .='<b>Email: </b>' . $email . "<br>"; 
$message .='<b>Phone: </b>' . $phone . "<br>"; 
$message .='<b>Message: </b>' . $msg; 

$success = mail($toemail, $subject, $message, $headers); 

echo json_encode($status); 
die 

다음

AJAX와와 jQuery의 :

var form = $('.contact'); 
form.submit(function() { 
    $this = $(this); 
    $.post($(this).attr('action'), function (data) { 
     $this.prev().text(data.message).fadeIn().delay(3000).fadeOut(); 
    }, 'json'); 
    return false; 
}); 


$.validator.setDefaults({ 
    submitHandler: function (form) { 
     $.ajax({ 
      type: "POST", 
      url: "email.php", 
      data: {'val': $(".contact").serializeJSON()} 
     }).done(function (data) { 
      alert(data); 
     }); 
    } 
}); 

$(".contact").validate(
     {rules: 
        {name: "required", 
         email: {required: true, email: true}, 
         phone: "required", 
         message: {required: true, maxlength: 300 
         }}, 
      errorClass: "error", 
      highlight: function (label) { 
       $(label).closest('.form-group').removeClass('has-success').addClass('has-error'); 
      }, 
      success: function (label) { 
       label 
         //.text('Seems Perfect!').addClass('valid') 
         .closest('.form-group').addClass('has-success'); 
      } 
     }); 

내가 어떤 도움을 주셔서 감사합니다 정말 거라고 여기

<div class="form-group wow fadeInRight" data-wow-delay="1s"> 
    <div class="controls"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
     <input type="text" class="form-control" id="name" name="name" placeholder="Name" /> 
    </div> 
    </div> 
</div> 

<div class="form-group wow fadeInRight" data-wow-delay="1.1s"> 
    <div class="controls"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> 
     <input type="text" class="form-control" id="email" name="email" placeholder="Email" /> 
    </div> 
    </div> 
</div> 

<div class="form-group wow fadeInRight" data-wow-delay="1.2s"> 
    <div class="controls"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span> 
     <input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" /> 
    </div> 
    </div> 
</div> 

<div class="form-group wow fadeInRight" data-wow-delay="1.3s"> 
    <div class="controls"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span> 
     <textarea name="message" class="form-control " rows="4" cols="78" placeholder="Enter your message here."></textarea> 
    </div> 
    </div> 
</div> 

<div id="success"></div> 
<div class="row wow fadeInUp" data-wow-delay="1.3s"> 
    <div class="form-group col-xs-12"> 
    <div class="contact-btns"> 
     <input type="submit" class="submit-button" value="Submit" name="submit"> 
     <input type="reset" class="clear-buttom" value="Clear" name="clear"> 
    </div> 
    </div> 
</div> 

</form> 

는 PHP의 : 여기

양식에 대한 HTML의 얘들 아, 나에게 이걸 제대로 할 수있어.

편집 여기에 새로운 jQuery를하고 AJAX 코드의 :

$(document).ready(function() { 
var form = $(this); 
var post_url = form.attr('action'); 
$('.contact').validate({ 
    rules: { 
     name: { 
      rangelength: [2,40], 
      required: true 
     }, 
     email: { 
      rangelength: [2,40], 
      email: true, 
      required: true 
     }, 
     phone: { 
      rangelength: [7,10], 
      required: true 
     }, 
     message: { 
      minlength: 30, 
      required: true 
     }, 
     errorClass:"error", 
     highlight: function(label) { 
      $(label).closest('.form-group').removeClass('has-success').addClass('has-error'); 
     }, 

     success: function(label) { 
      label 
      .closest('.form-group').addClass('has-success'); 
     } 
    }, 
    submitHandler: function(form) { 
     $.ajax({ 
      type: 'POST', 
      url: 'email.php', 
      data: $(form).serialize(), 
      success: function(msg) { 
       $('.sent').fadeIn().fadeOut(5000); 
      } 
     });    
     return false; 
    }     
});      

이});

지금 난 그냥 수 있도록하는 방법을 파악해야합니다 양식이 제출되면

직접 양식 위에 있습니다

<div class="status alert alert-success" style="display: none"></div> 

가에서 사라질 것이다. 작동하지 않습니다. 당신이 플러그인의 submitHandler 기능의 내부 .ajax()이 정확한하면서 동시에 당신이 jQuery를 submit 핸들러 함수의 내부 .post() (아약스)하고있는 이유

덕분에, 브레넌

Answer 1

는 이해가 안 돼요. 나는 그것을 얻지 않는다. 왜 아약스를 두 번 사용하고 있습니까? 이 플러그인의 submitHandler 기능을 방해하기 때문에

나는

form.submit(function() { 
    $this = $(this); 
    $.post($(this).attr('action'), function(data) { 
     $this.prev().text(data.message).fadeIn().delay(3000).fadeOut(); 
    },'json'); 
    return false; 
}); 

... 당신이 모든 기능을 제거하는 가장 좋은 것 같아요.

submitHandler을 사용하면 양식이 유효 할 때 click 버튼으로 코드를 실행할 수 있습니다. This is where any ajax would belong.

---

편집 : 당신은rules 옵션 내부 errorClass, highlight 및 success을 넣었습니다

은 ...

rules: { 
    name: { 
     .... 
    }, 
    email: { 
     .... 
    }, 
    phone: { 
     .... 
    }, 
    message: { 
     .... 
    }, 
    errorClass:"error", 
    highlight: function(label) { 
     ....   
    }, 
    success: function(label) { 
     .... 
    } 
}, 

이 잘못된 것입니다. errorClass, highlight 및 success은 형제은 rules 및 submitHandler 옵션입니다.

또한 highlight을 사용하는 경우 highlight으로 수행 한 작업을 실행 취소하는 데는 unhighlight을 사용하는 것이 가장 좋습니다.

아약스 success 옵션에서 양식을 지우기 위해

rules: { 
    // only your rules here 
}, 
errorClass:"error", 
highlight: function(element) { 
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
}, 
unhighlight: function(element) { 
    $(element).closest('.form-group').addClass('has-success').removeClass('has-error'); 
}, 
submitHandler: function(form) { 
    $.ajax({ 
     // your options 
    });    
    return false; 
} 

---

...

$('#myform').validate().resetForm(); // reset validation 
form[0].reset();      // clear out the form data