How to display a server side validation error on view page

Question

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.

_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
        }
          }
         }

Answer 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.

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...