How to submit a form in Semantic UI?-open source projects Semantic-Org/Semantic-UI

Digital Visual

The easiest way is to retrofit a standard HTML form use the code below.

Start with a basic working standard HTML form with a submit button and this will take your values and post them to your form destination, returning the output below your form submit button.

1. Its a good time to double check you are successfully linking to jquery, semantic javascript and semantic css at this point.

2. Add class=”ui form” to your form tag .

3. Add the javascript below.

.

$(document).ready(function() {

// validation 
 $('.ui.form').form({
    email: {
      identifier : 'email',
      rules: [
        {
          type   : 'email',
          prompt : 'Please enter an email'
        }
      ]
    }
},
{
    inline: true,
    on: 'blur',
    transition: 'fade down', 
    onSuccess: validationpassed
});

// called if correct data added to form 
function validationpassed() {

    // Multiple instances may have been bound to the form, only submit one.
    // This is a workaround and not ideal. 
    // Improvements welcomed. 

    if (window.lock != "locked") { 
        var myform = $('.ui.form');
        $.ajax({
            type: myform.attr('method'),
            url: myform.attr('action'),
            data: myform.serialize(),
            success: function (data) {
                //if successful at posting the form via ajax.
                myformposted(data);
                window.lock = "";
            }
        });
    } 
    window.lock = "locked";
}

// stop the form from submitting normally 
$('.ui.form').submit(function(e){ 
    //e.preventDefault(); usually use this, but below works best here.
    return false;
});




function myformposted(data) { 
    // clear your form and do whatever you want here 
    $('.ui.form').find("input[type=text], textarea").val("");
    //$('.ui.submit.button').after("Message sent. Thank you.");
    $('.ui.submit.button').after(data);
} 

});

Basic form:

    
    
    title
        
     
    
    

If you want the error message to show in a box rather than within the form itself include this in your form, and remove the words “inline: true,” and Semantic UI does the rest:

NOTE: Using form tags with Semantic UI isn’t strictly necessary as you only really need a div with the classes “ui form”, however this retrofit code does require a form tag.