how to prevent aui-form from submission , when aui required filed validator is empty

Question

I have a form and a required field as shown below. I added aui field validator for preventing form from submitting if the required field is empty. But its not working. Somebody please help me.

<aui:form id="fm" name="fm" method="post" action="<%= someURL %>">
    <aui:input id="txtArea" label="value" name="preferences--txtArea--" type="textarea" style="width:330px;height:65px;" > 
        <aui:validator name="required" />
    </aui:input>
    <aui:input name="termsAndCondition" id="termsAndCondition" type="checkbox" label="termsAndConditons"/> <br>
    <aui:button type="button" value="save" onClick="showDialog()" />
</aui:form>

<aui:script>
function showDialog()
{
    var termsAndCondition= A.one('#<portlet:namespace/>termsAndCondition').attr('value');
    var r=confirm("Are you sure to change data?");
    if (r==true && termsAndCondition=="true")
    {
        A.one('#<portlet:namespace/>fm').submit();
    }
}
</aui:script>

Answer 1

I found mistake in my code.. I used button type = "button" as you can see

 <aui:button type="button" value="save" onClick="showDialog()" />

but for using aui field validator work according to requirement, to prevent from submitting the form when required field is empty. use button type="submit". so corrected line is

<aui:button type="submit" value="save" onClick="showDialog()" />

Now its working fine :) :)

Answer 2

Try with this approach

<aui:form id="fm" name="fm" method="post" action="<%= someURL %>" onSubmit="check();>


<script type="text/javascript">

  function check()
  {
  }
</script>

OR

you can return false from your function showDialog()

Hope this will help you