Formularvalidierung + api Anruf mit semantischen ui

Question

Ich habe mir den ganzen Tag über den Kopf geschlagen.

Ich habe diesen JS-Code für semantische ui. Einfache Validierung + API (Ajax) -Aufruf.

$('.ui.form') 
    .form({ 
     fields: { 
      comment: { 
       identifier: 'comment', 
       rules  : [ 
        { 
         type : 'empty', 
         prompt: 'Please enter you comment.' 
        } 
       ] 
      } 
     } 
    }); 

$('.ui.form .submit.button') 
    .api({ 
     action  : 'new lead comment', 
     method  : 'POST', 
     serializeForm: true, 
     urlData  : { 
      id: $('#lead_id').val() 
     }, 
     onSuccess : function(response) { 
      alert('success'); 
      console.log(response); 
     }, 
     onFailure : function(response) { 
      alert('failure'); 
      console.log(response); 
     } 
    }); 

Das Problem ist, dass nach (gescheiterten) Formularvalidierung API aufgerufen wird und das sollte nicht passieren. Sowohl .form als auch .api funktionieren gut alleine, aber nicht im "Team". Ich kenne einige Workarounds (mit vorSenden, um jQuery $ .AJAX Aufruf zu tun), aber ich weiß, es muss eine "semantische" Art und Weise dies zu tun, sonst jemand codierte all diese Logik für nichts :)

Answer 1

Für zukünftige Referenz (und weil semantische ui docs in diesem Teil nicht klar ist) die Lösung (das ist für mich arbeitet) ist .form und .api auf dem semantischen ui Form Element wie folgt zu befestigen:

$('.ui.form') 
    .form({ 
     fields: { 
      comment: { 
       identifier: 'comment', 
       rules  : [ 
        { 
         type : 'empty', 
         prompt: 'Please enter you comment.' 
        } 
       ] 
      } 
     } 
    }) 
    .api({ 
     action  : 'new lead comment', 
     method  : 'POST', 
     serializeForm: true, 
     urlData  : { 
      id: $('#lead_id').val() 
     }, 
     onSuccess : function(response) { 
      alert('success'); 
      console.log(response); 
     }, 
     onFailure : function(response) { 
      alert('failure'); 
      console.log(response); 
     } 
    }); 

Answer 2

onSuccess Rückruf ist, was Sie brauchen .

$('.ui.form') 
.form({ 
    fields: { 
     comment: { 
      identifier: 'comment', 
      rules  : [ 
       { 
        type : 'empty', 
        prompt: 'Please enter you comment.' 
       } 
      ] 
     } 
    },onSuccess:function(event){ 
     event.preventDefault(); 
     alert('valid but not submitted'); 
     //you can use api or ajax call here 
    } 

});