Как иметь контроль над jquery Validate сообщения об ошибках

Question

У меня есть 4 поля и использование jquery для проверки сообщений об ошибках.

Когда я ввожу недопустимое значение в поле input с левой стороны, сообщения об ошибках отображаются непосредственно справа, тем самым нарушая выравнивание правого поля и наоборот.

Я хочу, чтобы сообщения об ошибках вместо этого отображались на следующей строке, не нарушая выравнивание любых статических элементов.

Я не уверен, CSS классы будут полезны в этом случае, чтобы иметь контроль над сообщениями об ошибках

Вот fiddle

Вот мой HTML:

<form id="ethernetForm"> 
<table style="width:100%"> 
    <tr> 
    <td valign="top"> 
     <label for="ipv4Address_0">IPv4 Address</label> 
     <input class="ipv4editable" type="text" name="ipv4Address" id="ipv4Address_0"> 
    </td> 
    <td valign="top"> 
     <label for="ipv6Address_0">IPv6 Address/Mask</label> 
     <input class="ipv6editable" type="text" name="ipv6Address" id="ipv6Address_0"> 
    </td> 
    </tr> 
    <tr> 
    <td valign="top"> 
     <label for="ipv4Mask_0">Subnet Mask v4</label> 
     <input class="ipv4editable" type="text" name="ipv4Mask" id="ipv4Mask_0"> 
    </td> 
    </tr> 
    <tr> 
    <td valign="top"> 
     <label for="ipv4Gateway_0">Gateway v4</label> 
     <input class="ipv4editable" type="text" name="ipv4Gateway" id="ipv4Gateway_0"> 
    </td> 
    <td valign="top"> 
     <label for="ipv6Gateway_0">Gateway v6</label> 
     <input class="ipv6editable" type="text" name="ipv6Gateway" id="ipv6Gateway_0"> 
    </td> 
    </tr> 
    </table> 
    </form> 

Answer 1

ошибка сообщения показывают в label что встроенный элемент, поэтому сделать его уровень блока, с установкой display:block

$("#ethernetForm").validate({ 
 

 
    rules: { 
 
     ipv4Address: { 
 
     ipv4validate: true 
 
     }, 
 
     ipv4Mask: { 
 
     ipv4validate: true 
 
     }, 
 
     ipv4Gateway: { 
 
     ipv4validate: true 
 
     }, 
 
     ipv6Address: { 
 
     ipv6validate: true 
 
     }, 
 
     ipv6Mask: { 
 
     ipv6validate: true 
 
     }, 
 
     ipv6Gateway: { 
 
     ipv6validate: true 
 
     } 
 
    }, 
 
    messages: { 
 
     ipv4Address: "Please enter a valid IPv4 address", 
 
     ipv4Mask: "Please enter valid v4 mask", 
 
     ipv4Gateway: "Please enter valid v4 gateway", 
 
     ipv6Address: "Please enter a valid IPv6 address", 
 
     ipv6Mask: "Please enter valid v6 mask", 
 
     ipv6Gateway: "Please enter valid v6 gateway" 
 
    } 
 
    }); 
 

 
    //Validate the IP addresses 
 
    $.validator.addMethod("ipv4validate", function(value, element) { 
 
    return this.optional(element) || /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i.test(value); 
 
    }); 
 

 
    $.validator.addMethod("ipv6validate", function(value, element) { 
 
    return this.optional(element) || /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i.test(value); 
 
    });

label.error { 
 
    padding-bottom: -20px; 
 
    color: red; 
 
    width: 100%; 
 
    display: block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
 

 
<form id="ethernetForm"> 
 
    <table style="width:100%"> 
 
    <tr> 
 
     <td valign="top"> 
 
     <label for="ipv4Address_0">IPv4 Address</label> 
 
     <input class="ipv4editable" type="text" name="ipv4Address" id="ipv4Address_0"> 
 
     </td> 
 
     <td valign="top"> 
 
     <label for="ipv6Address_0">IPv6 Address/Mask</label> 
 
     <input class="ipv6editable" type="text" name="ipv6Address" id="ipv6Address_0"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td valign="top"> 
 
     <label for="ipv4Mask_0">Subnet Mask v4</label> 
 
     <input class="ipv4editable" type="text" name="ipv4Mask" id="ipv4Mask_0"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td valign="top"> 
 
     <label for="ipv4Gateway_0">Gateway v4</label> 
 
     <input class="ipv4editable" type="text" name="ipv4Gateway" id="ipv4Gateway_0"> 
 
     </td> 
 
     <td valign="top"> 
 
     <label for="ipv6Gateway_0">Gateway v6</label> 
 
     <input class="ipv6editable" type="text" name="ipv6Gateway" id="ipv6Gateway_0"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

Answer 2

сообщения помечаются по классу .error. Используйте его, чтобы контролировать их.
https://jsfiddle.net/1s2nvp6r/ - пример скрипки.

.error{ 
    position: absolute; 
}  

Кроме того, вы можете использовать встроенную HTML-инспектор в большинстве современных браузеров для проверки атрибутов div.
Надеюсь, это поможет.

Answer 3

попробовать это:

CSS:

#ipv4Address_0-error{ 
    position: absolute ; 
    margin-left: -200px ; 
    color: #fff ; 
    background-color: #222 ; 
    padding: 3px ; 
} 

jQuery:

$(document).on("click","#ipv4Address_0-error",function(){ 
    $(this).hide(); 
});