поставяне на грешка при използване на плъгини за валидиране на формуляр tooltipster и jQuery?

използвам jQuery плъгин за валидиране на формуляр Този, за да валидирам моя формуляр и tooltipster за показване на съобщения за грешки.

кодът работи без проблеми за валидиране на формуляра и показване на грешки, единственият проблем се появява, когато покажа някои скрити елементи на формуляра, след като се покажат съобщенията за грешка.
така че ако изпратя формуляра след показване на скритите елементи (което се показва динамично, свързано с избора на потребителя), няма проблем с поставянето на съобщение за грешка.
но ако формулярът е изпратен и потребителят избере да покаже скритите елементи след като се появи съобщението за грешка, позицията за грешка се обърка.
HTML

<form id="eway" method="post" action="" ENCTYPE="multipart/form-data">
    <div class="roww">
<select name="txtAmount" id="txtAmount" class="inputfield select" >
                  <option value="Amount">Select Amount</option>
                  <option value="5">$5</option>
                  <option value="10">$10</option>
                  <option value="15">$15</option>
                  <option value="25">$25</option>
                  <option value="50">$50</option>
                  <option value="70">$75</option>
                  <option value="100">$100</option>
                  <option value="Custom">Custom Amount</option>
                  </select>
</div>

<div id="customAmount" style="display: none;">
<div class="roww">
<input name="txtCustomAmount" type="text" id="txtCustomAmount" class="inputfield" placeholder="Please enter amount more than $1"/>
</div>
</div>
<div class="roww">
<input name="txtLastName" type="text" id="txtLastName" class="inputfield" placeholder="Please enter your last name"/> </div>
<div class="roww"><input name="txtMobileNumber" type="text" id="txtMobileNumber" class="inputfield" placeholder="Please enter your mobile number"/></div>
<input type="submit" name="btnProcess" value="Process Transaction" id="btnProcess" class="go backcolr"/>
<form>

CSS

<style>
.cont
{
/*width:400px; height:470px; float:left; */
}
.roww
{
width:445px; height:auto; float:left; margin:5px 0;
}
.firts
{
width:180px; height:30px; float:left; font-weight:bold;
}
.second
{
width:210px; height:30px; float:left;
}
. firts span
{
 width:5px; height:25px; float:left; font-weight:bold; color:#F00
}
.showerror {border:1px solid #CE2726; padding:10px 15px; background:#FDE8E7; margin:5px 0 15px 0px; width:auto; color:#CE2726; ont-family: 'Ubuntu',sans-serif; font-size: 16px; font-weight: normal;}
.showsuccess {border:1px solid #ACDBAD; padding:10px 15px; background:#ECFAE3; margin:5px 0 15px 0px; width:auto; color:#4F8A10; ont-family: 'Ubuntu',sans-serif; font-size: 16px; font-weight: normal;}
.go {
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Ubuntu',sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    margin:0 0 0 0;
    float:right;
}
.inputfield {
    border: 1px solid #CBCBCB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 4px #E5E4E4 inset;
    color: #666666;
    float: left;
    height: 32px;
    line-height: 32px;
    margin-bottom: 15px;
    padding: 0 15px;
    width: 240px;
}
.select { padding:6px 10px; width: 270px;}
.clear { clear:both;}

</style>

И JS

$("#txtAmount").change(function(){
        var val = $(this).val();
        if(val == 'Custom'){
            $("#customAmount").fadeIn();
        }else{
            $("#customAmount").fadeOut();
        }
    });
$('#txtAmount').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });
$('#eway input[type="text"]').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
       }, "Value must not equal arg.");

(function($,W,D)
{

    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#eway").validate({
                 errorPlacement: function (error, element) {
                    $(element).tooltipster('update', $(error).text());
                    $(element).tooltipster('show');
                },
                rules: {
                    txtLastName: "required",
                    txtMobileNumber: "required",
                    txtAmount: { 
                        valueNotEquals: "Amount" 
                    }

                },
                messages: {
                    txtLastName: "Please enter your lastname",
                    txtMobileNumber: "Please enter a valid mobile number",
                    txtAmount: "please choose donation amount"

                },
                submitHandler: function(form) {
                        $.ajax({
                            url: form.action,
                            type: form.method,
                            data: $(form).serialize(),
                            async: false,
                            dataType: 'json',
                            beforeSend : function (){
                                $('#loading').show();
                            },
                            success: function(response) {
                                var status = response.status;
                                var message = response.message;
                                $('#loading').hide();
                                if(status == 1){
                                    $('#error').hide();
                                    $('#result').show();
                                    $('#result').html(message);
                                    resetForm($('#eway'));
                                }else{
                                    $('#result').hide();
                                    $('#error').show();
                                    $('#error').html(message);
                                }

                            }            
                        });
                }
            });
        }
    }

     $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);
    $('#eway').submit(function(e) {
        e.preventDefault();
    });

също и тази jsfiddle.net връзка


person Dr.Neo    schedule 17.06.2013    source източник


Отговори (1)


трябва да извикате tooltipster, за да препозиционирате, когато #textAmount се промени. по-долу можете да разгледате последните три реда, които добавих. тук е цигулката http://jsfiddle.net/B7XYz/11/

$("#txtAmount").change(function(){
        var val = $(this).val();

    if(val == 'Custom'){
        $("#customAmount").fadeIn();
    }else{
        $("#customAmount").fadeOut();
    }
    $(".roww").children().each(function(){
        $(this).tooltipster("reposition");
    });
});
person hevi    schedule 04.07.2013