1

ここでは検証プラグインを使用しています。すべて正常に動作していますが、ラジオ ボタンとチェック ボックスに表示されるエラー メッセージが適切に配置されていません。たとえば、ここでは性別オプションに 2 つのラジオ ボタンを使用しています。何も選択されていない場合、2 つのラジオ ボタンの間にエラー メッセージが表示されます。リストボックスでも同じことが起こっています。この問題に伴い、電話番号の範囲オプションを試しましたが、範囲オプションを適切に使用する方法がわかりません。この問題について私を助けてください。

JS コード:

$(document).ready(function () {
        $.validator.addMethod("validNameCharacter", function (value) {
            var pattern = /^[a-zA-Z0-9]+$/;
            return (pattern.test(value) > 0);
        }, "Avoid Special Characters in User Name");
        $.validator.addMethod("validPasswordCharacter", function (value) {
            var pattern = /^[a-zA-Z0-9]+$/;
            return (pattern.test(value) > 0);
        });
        $.validator.addMethod("ValidSalary", function (value) {
            if (isNaN(value)) {
                return false;
            } else {
                return true;
            }
        }, "Please enter a valid amount");
        var validator = $("#registrationForm").validate({
            errorClass: "error",
            validClass: "valid",
//            onkeyup: true,
//            onblur: true,
//            errorContainer: "#FormValidationErrors",
//            errorLabelContainer: $('ol', "#FormValidationErrors"),
//            wrapper: 'li',
            rules: {
                UserName: {
                    required: true,
                    minlength: 4,
                    maxlength: 15,
                    validNameCharacter: true
                },
                Password: {
                    required: true,
                    minlength: 4,
                    maxlength: 15,
                    validPasswordCharacter: true
                },
                ConfirmPassword: {
                    required: true,
                    minlength: 4,
                    maxlength: 15,
                    validPasswordCharacter: true,
                    equalTo: "#txtPassword"
                },
                EmailId: {
                    required: true,
                    email: true
                },
                Gender: "required",
                DOB: {
                    required: true,
                      date:true
                },
                PhoneNumber: {
                    required: true,
                    range: [1, 10]
                },
                Salary: {
                    ValidSalary: true
                },
                Country: {
                    required: true
                },
                JobAlert: {
                    required: true
                },
                Languages: {
                    required: true
                },
                About: {
                    required: true,
                    minlength: 20,
                    maxlength: 120
                },
                TermsAndConditions: "required"
            },
            messages: {
                UserName: {
                    required: "User Name is Required",
                    minlength: "Please enter atleast 4 characters ",
                    maxlength: "Please enter lessthan fifteen characters"
                },
                Password: {
                    required: "Password is Required",
                    minlength: "Please enter atleast 4 characters ",
                    maxlength: "Please enter less than fifteen characters",
                    validPasswordCharacter: "The Password you entered is invalid"
                },
                ConfirmPassword: {
                    required: "Confirm password is required",
                    minlength: "Please enter atleast 4 characters ",
                    maxlength: "Please enter less than fifteen characters",
                    validPasswordCharacter: "The Password you entered is invalid",
                    equalTo: "Password Does not matches"
                },
                EmailId: {
                    required: "Email is Required",
                    email: "Enter Valid Email"
                },
                Gender: {
                    required: "Please select the Gender"
                },
                DOB:
                {
                    required: "Please enter your Date of birth",
                },
                PhoneNumber: {
                    range: "Enter phone number between 1 to 10 characters"
                },
                Country: {
                    required: "Please select the Country"
                },
                JobAlert: {
                    required: "Please select the Job Alerting type"
                },
                Languages: {
                    required: "Please select the States"
                },
                About: {
                    minlength: "Please enter morethan 20 characters",
                    maxlength: "Please enter lessthan 120 characters"
                },
                TermsAndConditions: "Please Accept It" 
            }
        });
        $(".cancel").click(function () {
            validator.resetForm();
        });
        $("#btnChkValidForm").on('click', function () {
            var status = $("#registrationForm").valid();
            alert("Form  is : " + status + "\nTotal Number of Invalid Fields is : " + validator.numberOfInvalids());
        });

    });

HTML:

   <div id="UserRegistrationContainer" style="background: none repeat scroll 0% 0% slategray; width: 100%; border: 1px solid aqua; border-radius: 11px 11px 11px 11px;" >
    <form  action="/" method="post" id="registrationForm">
    <table>
        <tr>
            <td>
            User Name:
            </td>
            <td>
                <input type="text" name="UserName" value="" />
            </td>
        </tr>
        <tr>
            <td>
            Password:
            </td>
            <td>
                <input type="password" name="Password" value="" id="txtPassword"/>
            </td>
        </tr>
         <tr>
            <td>
           Confirm Password:
            </td>
            <td>
                <input type="password" name="ConfirmPassword" value="" />
            </td>
        </tr>
        <tr>
            <td>
            Mail-ID:
            </td>
            <td>
                <input type="text" name="EmailId" value="" />
            </td>
        </tr>
        <tr>
            <td>
                Gender:
            </td>
            <td>
                <input type="radio" name="Gender" value="Male" /> 
                <label for="Gender">Male</label>
                <input type="radio" name="Gender" value="Female" />
                <label for="Gender" id="genderLabel">Fe Male</label>
            </td>
        </tr>
        <tr>
            <td>
                DOB:
            </td>
            <td>
                <input type="text" name="DOB" value="" id="txtDOB" />
            </td>
        </tr>
        <tr>
            <td>
                Present Salary:
            </td>
            <td>
              <input type="text" name="Salary" value="" />
            </td>
        </tr>
        <tr>
            <td>
                Phone Number:
            </td>
            <td>
                <input type="text" name="PhoneNumber" value="" />
            </td>
        </tr>
        <tr>
            <td>
                Country:
            </td>
            <td>
                <select name="Country">
                    <option value="">Select Country</option>
                    <option value="India">India</option>
                    <option value="Sri Lanka">Sri Lanka</option>
                    <option value="China">China</option>
                    <option value="Japan">Japan</option>
                    <option value="United States">United States</option>
                    <option value="United Kingdom">United Kingdom</option>
                    <option value="Australia">Australia</option>
                    <option value="South Africa">South Africa</option>
                    <option value="Russia">Russia</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                    Notify Job Alert:
            </td>
            <td>
                <input type="checkbox" name="JobAlert" value="Email" /> Email <br />
                <input type="checkbox" name="JobAlert" value="Message" /> Message <br />
                <input type="checkbox" name="JobAlert" value="IVR" /> Voice Call <br />
                <input type="checkbox" name="JobAlert" value="Post" />  Post <br />
            </td>
        </tr>
        <tr>
            <td>
                Languages Interested:
            </td>
            <td>
                 <select name="Languages" multiple="multiple" size="5">
                    <option value="C">C</option>
                    <option value="C++">C++</option>
                    <option value="Java">Java</option>
                    <option value="Dot Net">Dot Net</option>
                    <option value="Vxml">Vxml</option>
                    <option value="Perl">Perl</option>
                    <option value="Phython">Phython</option>
                    <option value="HTML5 CSS">HTML5 CSS</option>
                    <option value="Unix">Unix</option>
                </select>
            </td>
        </tr>
          <tr>
            <td>
                About You:
            </td>
            <td>
                <textarea name="About" cols="33" rows="5" style="color:Gray;"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="checkbox" name="TermsAndConditions" value="" class="checkbox" />Accept Terms And Conditions                    
            </td>
        </tr>
        <tr>
            <td style="">
                <input type="submit" id="btnSubmit" value="Submit" name="Submit"/>  
                <input type="reset" id="resetForm" value="Reset" style="margin-left:15px;" class="cancel" />  
                <input type="button" id="btnChkValidForm" value="Check Form" style="margin-left:11px;" />
                <input type="submit" name="Save" value="Save" class="cancel" />
            </td>
        </tr>
    </table>
 </form>
 <div id="FormValidationErrors" class="container" style="margin-left: 325px;color:Red;">

    <ol>
    </ol>
 </div>
</div>

CSS:

.error  {
    background-color: #FFCECE;
    border:solid 1px red;
}
.valid {
    color:black;
}

私のコードへのリンク: リンク: - http://jsfiddle.net/qHCBy/

4

1 に答える 1

1

引用OP：

「何も選択されていない場合、2 つのラジオ ボタンの間にエラー メッセージが表示されます。」

これがデフォルトの動作です。メッセージ ( <label>) は、グループ内の最初のラジオまたはチェックボックスの直後に表示されます。

errorPlacementコールバック関数を使用してその位置を変更します。

最初にラジオかチェックボックスかを確認し、それに応じて配置します。

これはデフォルトのコールバックです...

errorPlacement: function(error, element) {
    error.insertAfter(element);
}

あなたの中で.validate()、このようなことをしてください...

errorPlacement: function(error, element) {
    if (element.attr("type") === "radio") {
        // your custom position
    } else {
        error.insertAfter(element);
    }
}

引用OP：

「この問題に伴い、電話番号の範囲オプションを試しましたが、範囲オプションを適切に使用する方法がわかりません。」

私はあなたが何を意味するのか本当にわかりませんが、これはrangeあなたがそれを実装したのと同じ方法を使用する方法です.

参照: http://jqueryvalidation.org/range-method/

説明: 要素が特定の値の範囲を要求するようにします。

「フィールド」を 13 ～ 23の値にします。

$( "#myform" ).validate({
    rules: {
        field: {
            range: [13, 23]
        }
    }
});

たぶん、rangelength代わりにメソッドが必要ですか？

参照: http://jqueryvalidation.org/rangelength-method/

「フィールド」の長さを 2 ～ 6 文字にします。

$( "#myform" ).validate({
    rules: {
        field: {
            rangelength: [2, 6]
        }
    }
});
于 2013-08-27T15:45:45.710 に答える