JQuery와 문의 : 나는 기본을</p> <p>이 : 새 pageload없이 메시지를 전달하는

Question

이 질문의 어색함을 용서해주십시오, 솔직히

이 상황을 어떻게 구 더 나은 질의 모르겠어 ... xhtml/php 페이지 내의 문의 양식을 사용하여 업그레이드 중입니다. 최근에이 페이지에 새로운 관련없는 jquery 플러그인을 추가 했으므로 jquery 기능을 사용하여 가능한 경우 간단한 양식 유효성 검사를 돕고 싶습니다. 유효성 확인은 이미 연락처 양식에 의해 제출 된 별도의 파일로 PHP를 통해 수행됩니다.

내가 원하는 일은 PHP 유효성 검사 메시지가 새로운 pageload없이 주 (연락 양식) 페이지로 다시 전달되는 것입니다. 이 jquery 어딘가에 의해 수행 된 본 적이 있지만 여기 또는 Google을 통해 다시 찾을 수 없습니다. 누구든지 도와 줄 수 있습니까?

내가 정말 여기에 속도와 단순성을 찾고, 먼저 눈에, JQuery와 유효성 검사 플러그인의 크기와 복잡성 발굴, 그래서 나는 특정 노선에 착수 싫어 해요 ...

Answer 1

당신이 찾고있는 것은 AJAX로 알려져 있으며, 특히 jQuery와 관련해서는 아무 것도 없습니다! 유효성을 검사하기 위해 PHP로 데이터를 전송할 때의 문제는 "속도"에 대한 요구 사항을 즉각적으로 배제한다는 것입니다. Javascript가 서버에 요청하여 모든 것이 정상인지 확인하는 동안 양식을 정지해야합니다. 이러한 이유로 유효성 검사를 서버 및 클라이언트 측에서 수행하는 것이 일반적입니다. 참고 항상 서버의 데이터의 유효성을 검사해야하므로 두 가지 모두를 말합니다.

이것을 염두에두고 시작해 보겠습니다. 당신은 우리가 처음이 볼 수 있듯이 그래서

<form id='myform' action='whatever.php' method='POST'> 
First Name: <input type='text' name='first_name' class='required'><br> 
Last Name: <input type='text' name='last_name'><br> 
Email: <input type='text' name='email' class='required'><br> 
Zip: <input type='text' name='zip'><br> 
</form> 

: 당신이 그것을 고려하는 것이 좋습니다, 더 큰 프로젝트를 위해,하지만 그것없이 충분히 쉽게 - 나는 검증 플러그인을 사용하지 않고 양식을 확인하는 방법을 보여 하겠어

이

$(function() { // wait for the document to be loaded 
    $('#myform').submit(function() { 
     var valid = true; // assume everything is okay 
     // loop through each required field in this form 
     $('input.required', this).each(function() { 
      // if the field is empty, mark valid as false 
      // and add an error class 
      if($.trim($(this).val()) == '') { 
       valid = false; 
       $(this).addClass('error_input'); 
      } 
     }); 

     // additional validation for email, zip, perhaps 

     return valid; // if valid is true, continue form submission 
    }); 
}); 

유효성 검사 플러그인 할 수있는이 모든 조금 깔끔한 청정하게,하지만 당신은 단지 간단한 양식을해야 할 경우 아무 문제가 없다 : 필요의 클래스 이름과 이메일, 그래서 우리는이 작업을 수행 할 수 있습니다 위의 접근법과 함께. 두 곳에서 유효성 검사 규칙을 가져야 만하기 때문에 서버가 자바 스크립트를 실행하거나 데이터를 서버에 호출하는 것과 별개로 사용자에게 잘못된 점을 빠르게 알려주고 싶지 않은 경우 대안이 없습니다.

희망이 도움이됩니다.

수정 : 내 질문에 오해 한 것 같습니다. 당신이 PHP 스크립트로 양식 데이터를 전달하기 위해이 값을 확인했으며, 부하없이 다시 페이지로 성공 또는 오류를 반환하려는 경우, 당신은 같은 것을 할 것입니다 : 다음

$('#myform').submit(function() { 
    // allow submit if we've validated this already 
    if($(this).data('done')) return true; 
    var data = $(this).serialize(); // serialize the form data 
    // you could get the two variables below from the actual form (DRY) 
    // with $(this).attr('action'); and $(this).attr('method'); but I am 
    // not sure if that is what you want... 
    var action = 'validate.php'; // what script will process this 
    var method = 'POST'; // type of request to make 
    $.ajax({ 
     type: method, 
     url: action, 
     data: data, 
     dataType: 'json', 
     success: function(d) { 
      if(d.code == 'success') { 
       // everything went alright, submit 
       $(this).data('done', true).submit(); 
      } else { 
       alert('something is wrong!'); 
      } 
     } 
    }); 
    return false; // don't submit until we hear back from server 
}); 

그리고 모든 당신의 나는 위의 자바 스크립트를 테스트하지 않았습니다

// verify everything... 
// data will be in $_POST just like a normal request 
if($everythingOK) { 
    $code = 'success'; 
} else { 
    $code = 'error'; 
} 
print json_encode(array('code' => $code)); 
exit; 

,하지만 난에 대한 권리해야 확신합니다 : PHP 스크립트는 모든 것을 확실히인지 여부를 나타 내기 위해, json_encode를 사용하여, 이런 식으로 뭔가를 반환 할 일은있다. 나는 이 도움이되기를 바랍니다. :)