在不同的JQuery UI小部件实例中指定元素

Question

我有一个JQuery创建的小部件，它将输入字段生成为具有预定义和不同ID的div。我在同一页面上有两个输入字段小部件的实例中遇到表单验证有困难。第一个小部件实例工作正常，但第二个实例似乎是响应第一个实例中的输入字段而不是它自己的输入字段。

我意识到我的代码存在问题，即我有相同ID的元素 - 不知道如何最好地解决这个问题。非常感谢帮助如何正确识别特定输入字段的值或将JQuery添加到表单创建代码以创建唯一实例。

以下是html容器：

    <div id="login">
    </div>

    <div id="otherDiv">
    </div>

这是JQuery小部件：

            $.widget("custom.login", {
          // default options
          options: {
              action:null
          },

          // the constructor
          _create: function() {

             console.log(this.options.id);
             var html  = '';


             $(this.element).addClass("custom-login");

             html += '<form id="loginForm" action="' + (this.options.action||'') + '">'
             html += '<div id="container">';
             html += '<label id="loginTitleText">User Login</label>';
             html += '<div class="spacer"></div>';
             html += '<div class="field" id="loginDiv"><input type="text" placeholder="     Apple ID" id="loginUser"/></div>';
             html += '<div class="spacer"></div>';
             html += '<div class="field" id="passwordDiv"><input type="password" placeholder="     Password" id="loginPassword"/></div>';
             html += '<div class="spacer"></div>';
             html += '<div class="field" id="submitDiv"><input type="submit" class="submitButton" value="Login to your account"/></div>';
             html += '</div>';
             html += '</form>';


             $(this.element).html(html);

             if(this.options.submit){
                 $('form', this.element).submit(this.options.submit);
             }

            this._refresh();

这是验证码：

        $("#login").login({submit:function(e){
            var x=document.forms["loginForm"]["loginUser"].value; 
            var y=document.forms["loginForm"]["loginPassword"].value; 
            if (x==null || x=="" || y==null || y==""){  
                alert("Please fill out all fields");  
                return false;  
            } 

           $("#otherDiv").login({submit:function(e){
            var x=document.forms["loginForm"]["loginUser"].value; 
            var y=document.forms["loginForm"]["loginPassword"].value;
            if (x==null || x=="" || y==null || y==""){  
                alert("Please fill out all fields");  
                return false;  
            } 

谢谢！