Semantic-ui: Submit form after form validation

[milkymura]

$('#someForm').form({
fields:{
    firstName:{
        identifier:'fname',
        rules:[{
           type:'empty',
           prompt:'First Name should not be empty'
        }]
    },
    midName:{
        identifier:'mname',
        rules:[{
            type:'empty',
            prompt:'Middle Name should not be empty'
        }]
    },
    lastName:{
        identifier:'lname',
        rules:[{
            type:'empty',
            prompt:'Last Name should not be empty'
        }]
    }
     }
 },{

 onSuccess:function(){
    alert('correct!');
   //submits form via $.ajax(){} 
 }

});

here is my form=

  <form class="ui form" id="someForm">
   <div class="three fields">
    <div class="field">
         <label>First name</label>
         <input type="text" placeholder="First Name" name="fname">
    </div>
    <div class="field">
         <label>First name</label>
         <input type="text" placeholder="MIddle Name" name="mname">
    </div>
    <div class="field">
         <label>First name</label>
         <input type="text" placeholder="Last Name" name="lname">
   </div>
  </div>

 <input type="submit" class="ui teal button" value="submit"/>   
 </form>

the problem here is that it never goes to the onSuccess function. It doesn't even alert. it just sends

                    somephppage.php?fname=sample&mname=sample&lname=sample

[jokeronaldo]

Please, provide a fiddle if you can.

Tip: If you put a submit type input, it will always fire default submit form action, except you handle it with js. Try using semantic submit button, as the following:

<div class="ui blue submit button">Submit</div>