Grails JQuery Ajax 폼 유효성 검사

Question

gsp에서 폼을로드하는 모달 대화 상자가 있는데 JSON 유효성 검사를 포함하여 ajax 기반 폼에 적합한 솔루션을 찾기 위해 고심하고 있습니다. 플래시 범위 메시지와 같은 성공 메시지 : 나는 다음과 JS가 열린

$('#calendar_form').live('click', function() { 
     $.modal({ 
      ajax: './form' 
      , title: '${message(code:'calendar.main.addAppointment')}' 
      , overlayClose: true 
     }); 
    }); 

:

$(document).ready(function() { 
    $('#form1').submit(function() { 

     $.ajax({ 
      type: 'POST', 
      url: '${createLink(action:'post')}', 
      data: $("#form1").serialize(), 
      success: function(result) { 
       alert(result); 
      } 
     }); 
    }); 
}); 

나는 그것의 성공 만약 JSON 응답을 반환하고이 오류가 발생하고 난 그렇지 않으면 Ajax를 필요로 할 때 새 요청으로 인해 모달 대화 상자가 사라집니다. 나는 내 컨트롤러 내 유효성 검사 중 발생 실패에 반응 어떻게

• :

  그래서 여기 내 질문입니까?

• 내 컨트롤러에서 유효성 검사 오류에 사용해야하는 HTTP 오류 코드는 무엇입니까?
• 폼의 오류 메시지로 특정 필드를 어떻게 업데이트합니까?
• 성공 메시지를 렌더링하기 위해 내 페이지의 플래시 부분을 어떻게 업데이트합니까?
• 성공 후 페이지의 다른 부분을 어떻게 업데이트 할 수 있습니까?

고맙습니다!

Answer 1

이 작업을 수행하는 데는 여러 가지 방법이 있으며, 아마도 하나 이상의 플러그인이 당신을 끌어들일 수 있습니다. 그러나, 내가 이것을 어떻게 다룰 지 보여 드리겠습니다. 이 객체는 다음과 같습니다.

class AjaxPostResponse { 
    boolean success 
    String message 
    String html 
    def domainObject 
    def errors = [:] 
} 

이것은 JSON으로 렌더링하는 객체입니다. 따라서 유효성 검증 오류가 있으면 성공은 거 나며 모든 오류를 오류 맵에 추가합니다. 나는 서비스에서이 작업을 수행하고 그 방법은 다음과 같습니다

def preparePostResponse(domainInstance) { 
    def g = grailsApplication.mainContext.getBean('org.codehaus.groovy.grails.plugins.web.taglib.ApplicationTagLib') 
    def postResponse = new AjaxPostResponse(domainObject: domainInstance) 
    if (domainInstance.hasErrors()) { 
     g.eachError(bean: domainInstance) { 
     postResponse.errors."${it.field}" = g.message(error: it) 
     } 
     postResponse.success = false 
     postResponse.message = "There was an error" 
    } else { 
     postResponse.success = true 
     postResponse.message = "Success" 
    } 
    return postResponse 
} 

그래서 내 컨트롤러는 내 클라이언트 측 코드에서

def save = { 
    def someObjInstance = new SomeObj(params) 
    someObjInstance.save(flush:true) 
    render myService.preparePostResponse(someObjInstance) as JSON 
} 

나는 같은 것을 할 같은 (JQuery와 양식 플러그인을 사용하여 보이는, 하지만이 ... 일반적인 $ 아약스/$ .post/$ 갔지 방법뿐만 아니라 함께

$(formElement).ajaxSubmit({ 
    dataType: 'json', 
    success: function(jsonData) { 
     if (jsonData.success) { 
     // do good stuff 
     } else { 
     // bad stuff happened 
     showErrors(jsonData.errors); 
     } 
    } 
}); 

를 작동합니다 그리고 내 showErrors는

를 작동

function showErrors(errors, element) { 
    var errorList = $("<ul>"); 
    for (field in errors) { 
     errorList.append("<li>" + errors[field] + "</li>") 
     $('input[name=' + field + ']').addClass('error'); 
    } 
    if (!element) { 
     $(".errors").html("").append(errorList).show(500); 
    } else { 
     $(element).html("").append(errorList).show(500); 
    } 
} 

희망이 있습니다.

Answer 2

답변이 만족스럽고 서비스 지향적 인 접근 방법입니다. 그러나 Ajax 컨트롤러를 사용하면 요구 사항이 매우 간단하고 오류 처리 및 지속성을 컨트롤러에서 바로 수행 할 수 있습니다. 모음에 좋은 국제화 오류를 추가 할 수있는 좋은 oneliner은 다음과 같습니다

는

if (!yourdomain.validate()) 
{ 
    errors.addAll(yourdomain.errors.allErrors.collect {message(error: it)}) 
} else { 
    yourdomain.save(); //etc . . . 
} 

그런

render(contentType: "text/json") { 
    if (errors) 
    { 
     success = 'false' 
     errorList = errors 
    } else { 
     success = 'true' 
     //otherstuff 
    } 
} 

을 다음과 자바 스크립트 (Grails는이이 문서상의 버그가로 JSON을 반환, 그래서 '데이터'사용하지 않음 JQuery를 사용하는 경우 'e'가 기본값입니다.

이 아약스

<g:formRemote /*or remoteLink */ ...your URL, etc... onSuccess="doResponse(data)"> 
<div class="alert" style="display: none" id="error"></div> 

호출하고 응답을

<g:javascript> 
     function doResponse(data) { 
      if (data.success == 'true') { 
       //success stuff 
      } else { 
       var errorList = $('<ul class="errors">'); 
       for (var i = 0; i < data.errorList.length; i++) { 
        errorList.append('<li>' + data.errorList[i] + "</li>"); 
       } 

       $('#error').html(errorList); 
       $('#error').show(); 
      } 

     } 
    </g:javascript>