ajaxForm과 jquery validator 함께 사용하기

갓김치·2021년 2월 8일
0

최종프로젝트

목록 보기
11/19

http://malsup.com/jquery/form/#api

ajaxForm의 옵션

validator 적용하지 않을 때

let searchForm = $("#searchForm").ajaxForm({
		/*
		 * ajaxForm이 submit전 이미 serialize된 form의 input을 복사한 후 inputs를 대상으로 서버로 넘기고있음
		 * 값을 지정하고싶으면 form이 아닌 inputs 대상으로 지정해줘야함
		 */
		beforeSubmit: function(inputs, form, options) {
			inputs[0].value = aptCode; // preScript의 상수
			console.log(inputs[0].value);
			console.log(form.find("[name='searchVO.searchAptCode']").val());
			return true;
		},
		dataType : "json",
		success : function(resp) {
			if(resp.message){
				new Noty({
					 text: resp.message.text, 
					 layout: resp.message.layout,
					 type: resp.message.type,
					 timeout: resp.message.timeout,
					 progressBar: true
				}).show();
				return;
			}
          ...
          ...
          ...
          
  • ajaxForm이 submit전 이미 serialize된 form의 input을 복사한 후 inputs를 대상으로 서버로 넘기고있음
  • 값을 지정하고싶으면 form이 아닌 inputs 대상으로 지정해줘야함

validator의 옵션

// 기존코드
let moveinInsertForm = $("#moveinInsertForm").ajaxForm();
let validator = moveinInsertForm.validate(validateOptions);

// 수정된 코드
// ajaxForm, validator 둘다 submit handler를 가지고 있어서 둘중 어느 핸들러가 실행될지 순서결정해주기위해서 이렇게 코딩함
let moveinInsertForm = $("#moveinInsertForm");
let validator = moveinInsertForm.validate(validateOptions); // 이런 옵션에 따라 validation을 걸어놓겠다 라는 의미 검증하겠다는 의미아님
moveinInsertForm.ajaxForm(options);

기존코드의 문제점

  • ajaxForm() 작동 후에 validate가 되기때문에 순서를 바꿔줘야함
let options ={
  dataType : "json",
  beforeSerialize : function (form, options) {
    // beforeSerialize 실행 전에 validator가 1번 작동함
    
    if(!confirm("등록하시겠습니까?")) return;
    // 	  		console.log(arguments); // arguments: 모든 파라미터에 대한 정보를 가지고있는 의사변수
    let dong = form.find(":input[name='dong']").val();
    let ho = form.find(":input[name='ho']").val();
    if(ho.length==3) ho='0'+ho;
    let houseCode = aptCode+'D'+dong+'H'+ho;
    form.find(":input[name='houseCode']").val(houseCode);
    
    // 밸리데이션 작동이후에 input값이 바뀌기때문에 한번더 체크
    return form.valid(); 
    // return true; // 위에 houseCode만드는 코드가 반드시 실행된다면 true로 둬도됨
  },
  // beforeSerialize 이 후 작동하는 코드
  beforeSubmit : function(inputs, form, options) {
    
    console.log(inputs);
  },
  success :commonSuccess
}
profile
갈 길이 멀다

0개의 댓글