jQuery默認驗證出現在輸入框內的錯誤

-3

我已經得到了這個表單。我在表單上添加了jQuery驗證插件，但每當發生驗證錯誤時，它都會顯示在輸入框內。這是html代碼片段。jQuery默認驗證出現在輸入框內的錯誤

我想要的錯誤出現以下電子郵件箱就像是發生了密碼箱。 <div id="emailInputGroup">是造成這個問題，但如果我刪除它，我丟失input-group-addon。

<div id="loginFormGroup" class="form-group"> 
    <label for="emailLabel" style="color:white"><strong>Email ID</strong></label> 
    <div id="emailInputGroup" class="input-group"> 
    <input name="email" type="email" class="form-control" placeholder="abc" autofocus></input> 
    <span class="input-group-addon">@abc.org</span> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="passwordLabel" style="color:white"><strong>Password</strong></label> 
    <input name="password" type="password" class="form-control" placeholder="password" /> 
</div>

以下是截圖：

我在Web開發初學者，所以懇請大家多多包涵，如果它似乎是一個簡單的問題。
謝謝。

這是jQuery代碼：

$(document).ready(function(){ 
    $.validator.addMethod("customValidator", function(value, element) { 
    return /^[a-zA-Z]+$/.test(value); 
}, 'No special char2'); 

    $("#signIn").click(function(){ 
      $("#loginForm").valid(); //default 
    }); 

    $("#loginForm").validate({ 
       rules: { 
         email: { 
            required: true, 
            minLength: 3, 
            maxLength: 10, 
            customValidator: true 
         }, 
         password: { 
            required: true, 
            minLength: 4, 
            maxLength: 32 
         } 
       }, 
       message: { 
         email: { 
            required: "email can't be empty", 
            minLength: "At least 3 email characters.", 
            maxLength: "At most 10 email characters." 

         }, 
         password: { 
            required: "password can't be empty", 
            minLenght: "At least 4 password characters", 
            maxLength: "At most 32 password characters" 
         } 
       } 
      }); 
});

我不知道這是否是連語法正確與否。

來源

2017-09-27 WhiteSword

這方面的任何原因被downvoted？：/ – WhiteSword

雖然我還沒有投票，jquery驗證追加錯誤''就在輸入元素後面。但是你可以通過在validate函數中定義自己的jquery代碼錯誤分配來操縱它。如果您將jquery驗證功能與您的問題一起發佈，我可以幫助您... –

請提及使用的插件（使用鏈接）並共享用於初始化插件的jQuery代碼。 –

您可以使用errorPlacement自定義要放在jQuery驗證

$("#loginForm").validate({ 
    rules: { 
     .......... 
    }, 
    message: { 
     .......... 
    }, 
    errorPlacement: function(error, element) { 
    // if the element is email, then append the error to its parent. 
    // which means the error will be rendered below the span 
    if (element.attr("name") == "email") { 
     error.appendTo(element.closest('div')); 
    } else { 
     error.insertAfter(element); // this is the default behaviour 
    } 
    } 
});

你的錯誤，這裏是一個fiddle

來源

2017-09-27 08:23:57 adiga

它仍然在同一行發出錯誤，但是謝謝我知道如何去做。 – WhiteSword

@WhiteSword小提琴僅用於演示目的。造型和位置你必須自己添加它。 – adiga

-1

你能否嘗試刪除</input>並使開標籤成爲內聯標籤？如：

<input name="email" type="email" class="form-control" placeholder="abc" autofocus/>

這樣做嗎？

來源

2017-09-27 07:57:27

不。 – WhiteSword

你是對的，你的跨度是打印錯誤的方式。因爲我看到你的密碼錯誤和罰款。請爲我嘗試一件事。嘗試： @ abc.org –

still the同樣的問題。 – WhiteSword

jQuery默認驗證出現在輸入框內的錯誤

回答

相關問題