AJAXポストでフォームを検証する

Question

私は計算を実行するためにクライアントがデータを入力する必要がある電卓をやっています。

私はクライアント側からの情報を検証していますが、私はサーバー側からもやりたいと思います。 Thisは私が次のような例ですが、私はそれを私の問題に適合させる方法を知らない。

@RestController 
@RequestMapping(value = "/api") 
public class CalculationController { 

    ... 

    @RequestMapping(value = "calculate", method = RequestMethod.POST) 
    public double[] calculate(@ModelAttribute("calcForm") @Validated CalculationForm form, 
            BindingResult result, 
            final RedirectAttributes redirectAttributes) { 
     double[] ans = new double[4]; 

     // Calculate and fill ans 

     return ans; 
    } 

私のAJAX POST：私のバリデータと

function calculate() { 
    if ($('#zone').val() === '' || $('#roofArea').val() === '' || $('#roofType').val() === '') { 
     alert("Missing data"); 
    } else { 
     var dataIn = $("#myForm").serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "api/calculate", 
      data: dataIn, 
      dataType: "json", 
      success: function (data) { 
         // Update labels in page 
        }, 
        error: function (e) { 
         alert("Error: " + e); 
        }, 
        done: function (msg) { 
         alert("Done: " + msg); 
        }, 
        async: false 
      }); 
      return false; 
     }; 

：

@Component 
public class BasicValidator implements Validator { 
    private Pattern pattern; 
    private Matcher matcher; 
    private static final String AREA_PATTERN = "^\\d+(\\.\\d{1,2})?$"; 

    @Override 
    public boolean supports(Class<?> clazz) { 
     return CalculationForm.class.equals(clazz); 
    } 

    @Override 
    public void validate(Object target, Errors errors) { 

     CalculationForm form = (CalculationForm) target; 

     ValidationUtils.rejectIfEmptyOrWhitespace(errors, "zone", "You must select a city or area of the map."); 
     ValidationUtils.rejectIfEmptyOrWhitespace(errors, "roofArea", "You must enter the roof area."); 

     pattern = Pattern.compile(AREA_PATTERN); 
     matcher = pattern.matcher(String.valueOf(form.getRoofArea())); 
     if (!matcher.matches()) 
      errors.rejectValue("roofArea", "You must enter a valid number."); 

    } 
} 

私は、フォームが完了したときに、いくつかの特定のラベルの値のみが更新されている必要があるので、私はAJAXを使用しています、私はページをリロードできません。

問題がある場合は、すべてが正しい場合、/api/calculateは、私がページにデータを入れるのに使う倍精度の配列を返します。しかし、エラーが発生した場合（必須フィールドに記入されていない場合）は、対応するメッセージを表示するためにエラーが発生した場所を教えてください。

Answer 1

あなたは応答を送信するために、次のドメインオブジェクトを使用する必要があります。

public class JsonResponse { 
     private String status = null; 
     private Object result = null; 
     public String getStatus() { 
       return status; 
     } 
     public void setStatus(String status) { 
       this.status = status; 
     } 
     public Object getResult() { 
       return result; 
     } 
     public void setResult(Object result) { 
       this.result = result; 
     } 

} 

それは二つの特性、「ステータス」と「結果」が含まれています。 "status"フィールドはString型で、 "FAIL"または "SUCCESS"を含みます。 「結果」には、ブラウザに返送される他のデータが含まれます。

ここで、成功と失敗の両方のケースでJsonResponseを返すようにコントローラメソッドを変更してください。

@RequestMapping(value = "calculate", method = RequestMethod.POST) 
    public JsonResponse calculate(@ModelAttribute("calcForm") @Validated CalculationForm form, 
            BindingResult result, 
            final RedirectAttributes redirectAttributes) { 

     JsonResponse res = new JsonResponse(); 

      if(!result.hasErrors()) { 
        double[] ans = new double[4]; 
        ----------------------------- 
        ----------------------------- 
        res.setResult(ans); 
        res.setStatus("SUCCESS"); 
        res.setResult(userList); 
      } else { 
        res.setStatus("FAIL"); 
        res.setResult(result.getAllErrors()); 
      } 

      return res; 
    } 

ここで、ajaxの成功関数の内部で検証を確認します。

success: function (data) { 
    if(data.status == "SUCCESS") { 
     // Update labels in page 
    } else { 
     errorInfo = ""; 
     for(i =0 ; i < data.result.length ; i++) { 
      errorInfo += "<br>" + (i + 1) +". " + data.result[i].code; 
     } 
     //add a div with id error to show errors. 
     $('#error').html("Please correct following errors: " + errorInfo); 
    } 
},