Jquery Sprawdź poprawność niestandardowej lokalizacji komunikatu o błędzie

Question

To wygląda bardzo prosto, ale nie mogę tego rozgryźć. Używam wtyczki sprawdzania poprawności jquery. Próbuję potwierdzić <input name=first> i <input name=second> do wyjścia komunikaty o błędach w:

<span id="errNm2"></span> <span id="errNm1"></span> 

ja już zacząłem pisać ten errorPlacement: czyli tam, gdzie można dostosować swoją lokalizację komunikat o błędzie.

Jak mogę umieścić komunikat o błędzie w tych <span>?

$(document).ready(function() { 
    $('#form').validate({ 
     errorPlacement: function(error, element) { 
      error.append($('.errorTxt span')); 
     }, 
     rules, 
}); 

<input type="text" name="first"/> 
<input type="text" name="second"/> 

<div class="errorTxt"> 
    <span id="errNm2"></span> 
    <span id="errNm1"></span> 
</div> 

Answer 1

Co należy użyć jest errorLabelContainer

jQuery(function($) { 
 
    var validator = $('#form').validate({ 
 
    rules: { 
 
     first: { 
 
     required: true 
 
     }, 
 
     second: { 
 
     required: true 
 
     } 
 
    }, 
 
    messages: {}, 
 
    errorElement : 'div', 
 
    errorLabelContainer: '.errorTxt' 
 
    }); 
 
});

.errorTxt{ 
 
    border: 1px solid red; 
 
    min-height: 20px; 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script> 
 

 
<form id="form" method="post" action=""> 
 
    <input type="text" name="first" /> 
 
    <input type="text" name="second" /> 
 
    <div class="errorTxt"></div> 
 
    <input type="submit" class="button" value="Submit" /> 
 
</form>

---

Jeśli chcesz zachować swoją strukturę następnie

jQuery(function($) { 
 
    var validator = $('#form').validate({ 
 
    rules: { 
 
     first: { 
 
     required: true 
 
     }, 
 
     second: { 
 
     required: true 
 
     } 
 
    }, 
 
    messages: {}, 
 
    errorPlacement: function(error, element) { 
 
     var placement = $(element).data('error'); 
 
     if (placement) { 
 
     $(placement).append(error) 
 
     } else { 
 
     error.insertAfter(element); 
 
     } 
 
    } 
 
    }); 
 
});

#errNm1 { 
 
    border: 1px solid red; 
 
} 
 
#errNm2 { 
 
    border: 1px solid green; 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script> 
 

 
<form id="form" method="post" action=""> 
 
    <input type="text" name="first" data-error="#errNm1" /> 
 
    <input type="text" name="second" data-error="#errNm2" /> 
 
    <div class="errorTxt"> 
 
    <span id="errNm2"></span> 
 
    <span id="errNm1"></span> 
 
    </div> 
 
    <input type="submit" class="button" value="Submit" /> 
 
</form>

Answer 2

Można po prostu utworzyć dodatkowe warunki, które pasują do pola, które wymagają w tej samej funkcji. Na przykład, używając swojego kodu powyżej ...

$(document).ready(function() { 
    $('#form').validate({ 
     errorPlacement: function(error, element) { 
      //Custom position: first name 
      if (element.attr("name") == "first") { 
       $("#errNm1").text(error); 
      } 
      //Custom position: second name 
      else if (element.attr("name") == "second") { 
       $("#errNm2").text(error); 
      } 
      // Default position: if no match is met (other fields) 
      else { 
       error.append($('.errorTxt span')); 
      } 
     }, 
     rules 
}); 

Mam nadzieję, że pomoże!

Answer 3

if (e.attr("name") == "firstName") { 
    $("#firstName__validate").text($(error).text()); 
    console.log($(error).html()); 
} 

Spróbuj tekst obiektu błędu dostać