- 용도 : codeigniter 폼검증 출력을 화면이 아닌 자바스크립트 경고창으로 표현하기

- 편견 : ci를 처음 접하시는 분들이 화면에 출력하는 모습에 대하여 외면하는 현상 발생

- 두마리 토끼 : 폼검증 결과를 화면에도 출력할 수 있고 경고창으로도 출력할 수 있는 개발자 선택

1. 차이점 이미지 설명

<<< ci에서 제공하는 출력형태 >>



<<< ci 폼검증과 + jQuery의 만남을 통하여 익숙한 경고창으로>


2. 설정 : config / constants.php 소스에 아래 소스를 추가
 

// Define Ajax Request
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

3. 컨트롤러 : controllers 폴더에 forms.php 파일을 신규 생성 (utf-8형식으로 생성)
 

<?php

class Forms extends Controller {

 function Forms()
 {
  parent::Controller(); 
 }
 
 function index()
 {
  $this->load->view('form');
 }

 function submit() {

  //load form validation
  $this->load->library('form_validation');

  //set form rules
  $this->form_validation->set_rules('username', '이름을', 'required|min_length[5]|max_length[15]');
  $this->form_validation->set_rules('email', '이메일을', 'required|max_length[20]|min_length[6]|valid_email');

  //run form validation
  $success = $this->form_validation->run();

  //set username variable
  $username = $this->input->post('username');

  //if the validation was a success
  if ((IS_AJAX && $success) || (!IS_AJAX && $success)) { echo "Congradulations {$username}, your form was accepted!"; }

  //if validation failed
  else { echo strip_tags(validation_errors()); }

 }

}

4. 뷰 : views 폴더아래에 form.php 파일을 생성 (utf-8형식으로 생성)


 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<!-- load jQuery from Google AJAX Libraries API -->
	<script type="text/javascript" src="http://codeigniter-kr.org/include/js/jquery-1.3.2.js"></script>

	<script type="text/javascript">
	$(document).ready(function() {
 		$("form").submit(function(e) {
 			e.preventDefault();
			$.post("/forms/submit", { username: $("#username").val(), email: $("#email").val() }, function (data) {
				alert(data);
			});
 		});
 	});
	</script>

<FORM id=ajax-form action=/forms/submit method=post>
<LABEL for=username>이름</LABEL>
<INPUT id=username name=username>

<LABEL for=email>이메일</LABEL>
<INPUT id=email name=email>
<INPUT id=form_submit type=submit value=확인>
</FORM>