CODEWITHSUNDEEP
javascripthtmlsemantic-ui
Alli Balogun Pharoouq
Alli Balogun Pharoouq

Reputation: 11

Semantic ui submit multiple times

I am using semantic ui for my ui and form validation, i am trying trigger login api after validation is done (i replaced that with console). When i try to submit, it submits three times.

$('.ui.form')
  .form({
    fields: {
      username : ['minLength[4]', 'empty'],
      password : ['minLength[6]', 'empty'],
    },
        onSuccess : function() 
    {
      // Login api process here
      console.log("weed");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">

	<div class="ui grid">
	
	<div class="five wide column" style="margin: 0px auto; margin-top: 5vh;">

		<div class="ui form segment error">

		<h3 class="ui centered header">Please Login</h3>

		<div class="ui form">

		  <div class="field">
		    <label>Username</label>
		    <input name="username" type="text">
		  </div>

		  <div class="field">
		    <label>Password</label>
		    <input name="password" type="password">
		  </div>

 	      <button class="primary submit ui button">Login</button>

		</div>

		<div class="ui error message"></div>

		</div>

		<div style="display: none;" class="ui segment">

		  <p></p>
		  <div class="ui active dimmer">
		    <div class="ui loader"></div>
		  </div>

		</div>

	</div>

	</div>

Thanks in advance!!

Upvotes: 0

Views: 724

Answers (1)

iamjpg
iamjpg

Reputation: 7618

It's because you have multiple .ui.form classes in your HTML markup. I would recommend on the second instance adding a new class or ID like so:

<div class="ui form theForm">

Then in your JS:

$('.theForm').form({
  fields: {
    username: ['minLength[4]', 'empty'],
    password: ['minLength[6]', 'empty'],
  },
  onSuccess: function(e) {
    e.stopImmediatePropagation();
    // Login api process here
    console.log("weed");
  }
});

JSFiddle example here: https://jsfiddle.net/iamjpg/am63qe8h/

Upvotes: 3

Related Questions