1

はjQueryフォーム検証プラグインを使用して、フォームとツールチップスターを検証してエラーメッセージを表示します。

フォームを検証してエラーを表示するために問題なく動作するコードは、エラーメッセージが表示された後に非表示のフォーム要素を表示すると、唯一の問題が表示されます。
したがって、非表示の要素 (ユーザーの選択に関連して動的に表示される) を表示した後にフォームを送信すると、エラー メッセージの配置に問題はありません。
ただし、フォームが送信され、ユーザーがエラー メッセージが表示された後に非表示の要素を表示することを選択した場合、エラーの位置が間違っています。
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 リンク

4

1 に答える 1

0

#textAmount が変更されたときに再配置するには、tooltipster を呼び出す必要があります。以下に、私が追加した最後の 3 行を示します。ここにフィドルがあります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");
    });
});
于 2013-07-04T21:36:52.463 に答える