Semantic-ui: validation is working when i click submit but the form is also adding when error show

[cemezgin]

when i click the button the error messages are showing but its also adding empty values to database.

<script>
$(document)
                .ready(function() {
                    $('.ui.form').form({
                                inline: true,
                                on:  'blur',
                                fields: {
                                    code: {
                                        identifier  : 'code',
                                        rules: [
                                            {
                                                type   : 'empty',
                                                prompt : 'Please enter course code'
                                            }
                                        ]
                                    },
                                     section: {
                                        identifier  : 'section',
                                        rules: [
                                            {
                                                type   : 'empty',
                                                prompt : 'Please enter section'
                                            },
                                             {
                                                type   : 'integer',
                                                prompt : 'Please enter integer number'
                                            }
                                        ]
                                    },
                                     coursename: {
                                        identifier  : 'coursename',
                                        rules: [
                                            {
                                                type   : 'empty',
                                                prompt : 'Please enter coursename'
                                            }
                                        ]
                                    },
                                      totalduration: {
                                        identifier  : 'totalduration',
                                        rules: [
                                            {
                                                type   : 'empty',
                                                prompt : 'Please enter totalduration'
                                            },
                                            {
                                                type   : 'integer',
                                                prompt : 'Please enter integer number'
                                            }
                                        ]
                                    }

                                }

                            })

                });
</script>

this part is ajax part of buttons onclick

$("#savecourse").on("click", function() { 
      var code = $("#code").val();
      var section = $("#section").val();
      var coursename = $("#coursename").val();
       var totalduration = $("#totalduration").val();
    $.ajax({
      type: "POST",
      url: "course_add.php",
      data: ({coursecode:code,coursesection:section,ccoursename:coursename,duration:totalduration}),
      success: function(data) {
        window.alert("course added successfully.");
        window.location.reload(true);
      }
    });  
});

and this part is the form.

   <form class="ui form">
              <div class="two fields">
                <div class="field">
                  <label>Course Code</label>
                  <input name="code" id="code" type="text">
                </div>
                <div class="field">
                  <label>Section</label>
                  <input name="section" id="section" type="text" >
                </div>
              </div>
              <div class="two fields">
                <div class="field">
                  <label>Course Name</label>
                  <input name="coursename" id="coursename" type="text" >
                </div>
                <div class="field">
                  <label>Total Duration</label>
                  <input name="totalduration" id="totalduration" type="text">
                </div>
              </div>

              <button class="ui submit button" id="savecourse">Save Course</button>
              <div class="ui error message"></div>
    </form>

i tried making div the buttons but doesnt change anything.

[IonutBajescu]

Hey, please fork this fiddle and paste your code inside of it - it'll allow us to see the code in action.

http://jsfiddle.net/efp8z6Ln/

[cemezgin]

http://jsfiddle.net/efp8z6Ln/423/ i couldnt include ajax send page but its also possible to see error onclick function is working.

[ardamose123]

The problem is caused by your "click" event on the button. It's not validating anything; it's just grabbing all the form's values and sending them using AJAX.

You can check the validity of the form's values by using the behaviors described in the documentation: http://semantic-ui.com/behaviors/form.html#/settings

[cemezgin]

i could not find in documentation maybe i couldn't see. How i can validate the form in onclick ? is that possible to say ?

[awgv]

Hi @cemezgn,

You can do something like that in your click event:

$('#savecourse').on('click', function() { 
  if ( $('.ui.form').form('is valid') ) {
    // Do an AJAX call.
  }
})

The following is a standard reply.

Thank you for posting, but although it’s a valid usage question, we’ve limited GitHub Issues to bug reports and feature requests, keeping the board more manageable for maintainers; see the contributing guidelines for more information on what kind of posts should find themselves into the GitHub Issues board.

To get answers or feedback that might allow you to repost this issue, please use one of our other support resources:

• Gitter chatroom
• Official forums
• StackOverflow