如何在Web表单中显示错误信息?

时间:2013-06-11 21:20:53

标签: java forms

此问题与this有关。但既然我还没有解决这个问题,我想稍微重申一下我的问题。我正在使用Java Jersey REST API作为我的后端Web服务。客户端是一个简单的Web表单HTML页面。基本上我想要的是:如果用户提交一个Web表单并且由于数据库唯一约束违规而导致一些错误,我希望用户在表单中看到一条错误消息,其中包含ID字段,例如“ID已存在! ”。 Web表单是一个简单的form.html:

<form action="/myapp/rest/customer/created" method="POST">
    <table border="1">
        <tr>
            <td>Customer name:</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>Customer ID:</td>
            <td><input type="text" name="id"></td>
        </tr>
        <tr>
            <td>Customer DOB:</td>
            <td><input type="text" name="dob"></td>
        </tr>
    </table>
    <br/>
    <input type="submit" value="Submit">
</form>

如果发生错误,如何将错误信息从Jersey API传递到客户端?与此表单提交相关联的服务器端POST调用如下:

@POST
@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
@Path("created")
public Response createCustomer(@FormParam("id") int id,
        @FormParam("name") String name, @FormParam("dob") Date dob)
        throws ServletException, IOException {
    URI uri = URI.create(uriInfo.getPath());
    Response r;
    r = Response.created(uri).build();

    try {
        dbController.create(id, name, dob); //This may throw exception.

    } catch (DataAccessException ex) {

        //To do: How to pass the error message to the client-side UI via e.g., Ajax?

    }

    return r;
}

1 个答案:

答案 0 :(得分:1)

首先在代码中的某处添加它。它将显示错误消息:

<span id="errorDiv" name="errorDiv" class="errorDiv" ></span>

接下来,将表单声明修改为:

<form action="/myapp/rest/customer/created" method="POST" onsubmit="return checkForm()">

在提交表单之前,它将调用checkForm()函数。如果函数返回true,那么它将发布表单。如果没有那么它将阻止表单提交并显示错误消息。

假设您使用jQuery / AJAX调用提交表单内容。您可以从服务器返回String(默认值='success')。如果有错误,请更改特定字符串并将其返回并检查客户端的值。

responseTxt是返回的值。

function checkForm(){
  //get values from form
  var name= $("#name").val();               
  var id= $("#id").val();
  var dob= $("#dob").val();

  $.post('DESTINATION',{name:name,id:id,dob:dob},function(responseTxt) {
  //MAKE YOUR CHECK HERE. JUST AN EXAMPLE
  if (responseTxt.substring(0,4)=='succ'){
  //redirect to destination
    return true;

  }else{

  //display error in errorDiv span

  $('#errorDiv').html('<font color=red>Wrong username or password.</font>');

  //prevents form to be submitted
  return false;
  }

  });
}

希望有所帮助