如何在视图页面上显示服务器端验证错误

As i'm working on grails framework but not using controller.My application is "Single Page Application".I dont want to reload my page so I have written service i.e RegistrationService with Ajax calling. So i'm using knockout for data-binding.Database using is postgresql . I have a view page where i'm having an email field. When i'm entering a duplicate email id and clicking save button then i can see a validation error i.e "Email has already been taken" but even if i'm writing a unique id then also i'm getting the same validation error.This is because its going in error condition in modalModal.js page, So I'm not getting how to fix this problem.I just want when i enter unique id and click save button then it should not given validation error.

因为我正在使用grails框架而不是使用controller.My应用程序是“单页应用程序”。我不想重新加载我的页面所以我已经编写了服务，即使用Ajax调用的RegistrationService。所以我使用knockout进行数据绑定。使用的数据库是postgresql。我有一个视图页面，我有一个电子邮件字段。当我输入一个重复的电子邮件ID并单击保存按钮然后我可以看到验证错误，即“电子邮件已被采取”，但即使我正在写一个唯一的ID，那么我也得到相同的验证错误。这是因为它在modalModal.js页面中出错了，所以我没有得到如何解决这个问题。我只是想当我输入唯一ID并单击保存按钮然后它不应该给出验证错误。

_newCostingpage.gsp  (my view page)

    <div id="light" class="white_content" style="color: black;">
    <form action="#/cart" method="post">
    <input type="hidden" name="url" value="${grailsApplication.config.serverURL}"/>
    <p><label>first name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="firstName"
             class="formElement" data-bind='value: firstName'/></label></p>
    <p><label>last name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="lastName" 
              class="formElement" data-bind='value: lastName' /></label></p>
    <p><label>organisation: <input name="organisation" class="formElement" data-
              bind='value: organisation' /></label></p>
<p><label>email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input name="email" class="formElement" data-bind='value: email' /></label><label 
         id="errorDiv"></label></p>
<p><label>password:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="password" name="password"
         class="formElement" data-bind='value: password' /></label></p>
 <p><label style="margin-left: -37px;">confirm password:</label> <input
        type="password" name="confirmPassword" class="formElement" data-bind='value:
        confirmPassword' /></p>
 <p><input type="submit" value="register"/></p>
</form>
 <a href="javascript:void(0)"onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';clearBox();">Close</a>
        </div>
        <div id="fade" class="black_overlay"></div>
    </div>

Domain class :-\

  class Registration {
String firstName
String lastName
String organization
String email
String password
String confirmPassword

static constraints = {
    firstName(nullable:false)
    lastName(nullable:true)
    organization(blank:false)
    email(nullable:false,email:true,unique:true)
    password(blank:false)
    confirmPassword(blank:false)
               }
            }

modalModal.js

var ratPack = $.sammy(function() {
this.post('#/cart', function() {
    var firstname = this.params['firstName'];
    var lastName = this.params['lastName'];
    var organisation = this.params['organisation'];
    var email = this.params['email'];
    var password = this.params['password'];
    var confirmPassword = this.params['confirmPassword'];
    var baseurl = this.params['url'];
    $.ajax({
        type : 'POST',
        url :'http://localhost:9191/guido-rest-
                          resource/api/registration/'+firstname+'/'+lastName+'/'+email,
        success : function() {
            alert("success:");
        },
        error:function(){
           $('#errorDiv').text("Email has already been taken");
        }
    });
    });
      });
        $(function() {
       ratPack.run();
        });
        function clearBox(){
       $('.formElement').val("");
       }


   RegistrationResource.groovy

         package common.rest.resourcepl
         import static org.grails.jaxrs.response.Responses.*
         import javax.ws.rs.Consumes
         import javax.ws.rs.GET
         import javax.ws.rs.Produces
         import javax.ws.rs.Path
       import javax.ws.rs.PathParam
       import javax.ws.rs.POST
      import javax.ws.rs.core.Response
      import common.servicepl.RegistrationService
     @Path('/api/registration')
       class RegistrationResource {
   @GET
   @Produces('text/plain')
   String getRegistrationRepresentation() {
    'Registration'
    }
   def registrationService;
    @POST
    @Path('/{firstname}/{lastName}/{email}')
    Response create(@PathParam('firstname') String firstname,
                @PathParam('lastName') String lastName,
                @PathParam('email') String email) {
                return  
        RegistrationService().createRegistration(firstname,lastName,email);
  }
     }

     RegistrationService.groovy

         package common.servicepl
         import common.persistencepl.Registration
         class RegistrationService {
              def createRegistration(String firstName,String lastName,String email) {
        println "Inside Registration Service"
        def reg = new Registration();
        reg.firstName = firstName;
        reg.lastName = lastName;
        reg.password = "asdf";
        reg.confirmPassword = "asdf";
        reg.email = email;
        reg.organization = "fasdf";
        if(reg.save([flush:true])){
           return true
        }
        else
        {
          return false
        }
          }
         }

2 个解决方案

#1

Server should include server side errors in the response.

服务器应在响应中包含服务器端错误。

Make those error messages a property of the viewmodal, and bind that to properly styled html segment.

将这些错误消息作为viewmodal的属性，并将其绑定到正确设置样式的html段。

Also, when you call a service from your same application, do not speficy the full path like http://localhost..., Specify it relative to your current page /api/registration...

此外，当您从同一个应用程序调用服务时，请不要像http：// localhost那样指定完整路径...，相对于当前页面/ api / registration指定它...

#2

In grails controller you should write:

在grails控制器中，您应该写：

if (!beanName.hasErrors() && beanName.validate()) {
        // TODO 
   } else {
         render status: Constants.SC_VALIDATION_FAILED, view: "viewName", model: [beanName: beanName]
}

and in view:

在视野中：

<div>
 <g:hasErrors bean="${beanName}">
   <div class="errors">
     <g:renderErrors bean="${beanName}" as="list"/>
   </div>
 </g:hasErrors>
</div>

#1