Formular auf AJAX-Post validieren

Question

Ich mache eine Art Taschenrechner, wo es für den Kunden notwendig ist, Daten einzugeben, um die Berechnung durchzuführen.

Ich validiere die Informationen von der Client-Seite, aber ich möchte es auch von der Server-Seite tun. This ist das Beispiel, dem ich folge, aber ich weiß nicht, wie ich es mit meinem Problem kompatibel machen kann.

@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; 
    } 

Mein 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; 
     }; 

und mein Validator:

@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."); 

    } 
} 

ich AJAX verwende, weil ich brauche, wenn das Formular nur die Werte einiger spezieller Etiketten abgeschlossen ist, werden aktualisiert , damit ich die Seite nicht neu laden kann.

Das Problem ist, dass, wenn alles korrekt ist, /api/calculate ein Array von Doubles zurückgibt, die ich verwende, um die Seite zu füllen. Aber wenn ein Fehler auftritt (füllt die erforderlichen Felder nicht aus), müssen Sie mir sagen, wo der Fehler aufgetreten ist, um die entsprechende Nachricht anzuzeigen.

Answer 1

Sie müssen folgendes Domain-Objekt verwenden Antwort zu senden:

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

} 

Es zwei Eigenschaften enthalten, „Status“ und „Ergebnis“. Das Feld "status" ist vom Typ String und enthält "FAIL" oder "SUCCESS". "Result" enthält die anderen Daten, die zurück an den Browser gesendet werden sollen.

Ändern Sie nun Ihre Controller-Methode, um JsonResponse für erfolgreiche und fehlgeschlagene Fälle zurückzugeben.

@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; 
    } 

Jetzt innerhalb Ihrer Ajax-Erfolgsfunktion überprüfen Sie für die Validierung.

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); 
    } 
},