Question

我正在使用语义ui进行我的ui和表单验证，我在验证完成后尝试触发登录api（我用控制台替换它）。当我尝试提交时，它会提交三次。

$('.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>

提前致谢!!

Answer 1

这是因为HTML标记中有多个.ui.form类。我建议在第二个实例中添加一个新的类或ID，如下所示：

<div class="ui form theForm">

然后在你的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示例：https://jsfiddle.net/iamjpg/am63qe8h/

语义ui提交多次

1 个答案: