Jquery验证引擎位置错误

时间:2017-08-05 04:05:54

标签: javascript jquery

enter image description here

我一直面临着这个问题。我尝试了很多东西,但没有人工作。此页面上的验证错误始终显示在左侧。这是我的vaildation引擎jquery。请帮忙。

$("#register_form").validationEngine({
                     showOneMessage: true,
                     scroll : false,
                     maxErrorsPerField: 1,
                     promptPosition: "bottomLeft",
                     updatePromptsPosition: true,
                     autoPositionUpdate: true,
        });
      });

HTML 这是我的表格。

 <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" id="register_form">
        <div class="col-100">

        <input type="text" class=" twidh validate[required, minSize[2]] " maxlength="60" placeholder="Your Name" name="name" id="rname" />
        <span id="runame" class="errroes"></span> </div>
    <div class="col-100">
        <input type="text" class=" twidh validate[required, custom[email]]" maxlength="100" placeholder="Your Email Address" name="remail" id="remail" onblur="validateEmail()" />
        <span id="runame" class="errroes"></span> </div>

    <div class="col-100">
        <input type="password" class=" twidh validate[required, minSize[6]]" placeholder="Your Password" name="password" id="rpassword" />
        <span class="errroes" id="rpwd"></span> </div>
    <div class="col-100">
        <input type="text" class=" twidh validate[required, custom[onlyNumber] ,minSize[10],maxSize[10]]" maxlength="10" maxlength="10" placeholder="Enter Mobile Number" name="mobile" id="phone" />
    </div>
    <div class="col-100">

        <div class="text-hea" id="gender">Gender</div>
        <div class="twidh">
            <div class="names">
                <input type="radio" class="radioo" value="M" id="male" name="sex" /> Male </div>
            <div class="names">
                <input type="radio" class="radioo" value="F" id="female" name="sex" checked="checked" /> Female
            </div>
        </div>
    </div>
    </div>
    <div class="link" style="text-align:left !important"> By clicking Register, you agree to <strong>Terms of Use</strong> and <a href="http://www.shopes.in/return-policy.php"><strong>Privacy Policy.</strong></a>
    </div>
    <div class="col-100">
        <div class="col-md-2">
            <input type="submit" class="ss1 st" name="register" value="Register Now" />
        </div>
    </div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

2 个答案:

答案 0 :(得分:1)

我在website上找到了您的HTML。问题是由position: relative课程中的样式.link引起的。您已将其应用于OR块,就在表单上方。

您可以通过在position: relative元素上应用其他form样式轻松解决此问题。所以它会变成这样:

<form action="/sregister.php" method="post" id="register_form" style="
    position: relative;
">

我刚刚在您的实时网站上对此进行了测试,效果非常好。 image

答案 1 :(得分:0)

您网站上的已检查问题。您正在使用下面的内联样式。

opacity: 0.87; 
position: absolute; 
top: 241px; 
right: initial; 
margin-top: 0px; 
display: block; 
left: 489.5px;

但在这种情况下,“left”无法识别,因为已经在strap.css中赋予此属性重要性。

检查以下代码在strap.css中

.formError {
    left: 30px !important;
}

现在,您可以将内联样式更新为

opacity: 0.87; 
position: absolute; 
top: 241px; 
right: initial; 
margin-top: 0px; 
display: block; 
left: 489.5px !important;

它会起作用。