0

「日」、「月」、「年」の 3 つの選択ボックスを含む生年月日フィールドセットを持つ雇用主の HTML フォームを編集しています。フォームの送信に生年月日は必要ありません。ただし、ユーザーが 3 つの選択ボックスのうち 1 つまたは 2 つだけでオプションを選択できないようにするフォーム検証を作成する必要があります。つまり、Date of Birth フィールドセットで何かが選択されている場合、フォームを検証するにはそれらをすべて選択する必要があります。また、ユーザーが月や年ではなく日だけを選択しようとすると、送信時に 3 つの選択ボックスすべてが赤い枠線と異なる色の背景に変更され、送信ボタンが無効になるまで無効になります。すべての選択が行われるか、クリアされます。また、選択ボックスの下にエラー メッセージを表示したいと考えています。

私はまだJavaScriptにかなり慣れていないため、オンラインまたはこのサイトのどこにも解決策を見つけることができませんでした. フォームバリデーターの他の例を見ましたが、私が探していることをしているようには見えませんでした。

これは、開発チームから提供された、私が使用している HTML コードの短縮版です。

<div class="control-group">
<fieldset>
    <legend id="dateofbirth">Date of Birth:</legend>
    <div class="controls">
        <div class="hide"><label tabindex="0" id="dd">Select your two-digit day of birth.</label></div>
        <select id="dob-dd-select" name="BIQ_DOB_DAY" class="dd" aria-required="true">
            <option id="dob-day-0" role="option" aria-selected="true" value="">Day</option>
            <option id="dob-day-1" role="option" aria-selected="false" value="1">1</option>
            <option id="dob-day-2" role="option" aria-selected="false" value="2">2</option>
        </select>

        <div class="hide"><label id="mm">Select your month of birth.</label></div>
        <select class="mm" id="dob-month-select" name="BIQ_DOB_MONTH" tabindex="0" aria-required="true">
            <option id="dob-month-0" role="option" aria-selected="true" value="">Month</option>
            <option id="dob-month-1" role="option" aria-selected="false" value="1">1. January</option>
            <option id="dob-month-2" role="option" aria-selected="false" value="2">2. February</option>
        </select>

        <div class="hide"><label tabindex="0" id="yyyy">Select your four-digit birth year.</label></div>
            <select class="yyyy" id="dob-yyyy-select" name="BIQ_DOB_YEAR" tabindex="0" aria-required="true">
                <option id="yyyy0" role="option" aria-selected="true" value="">Year</option>
                <option id="dob-year-1" role="option" aria-selected="false" value="1900">1900</option>
                <option id="dob-year-2" role="option" aria-selected="false" value="1901">1900</option>
            </select>
    </div><!--/controls-->
</fieldset>
</div><!--/control-group-->

<div>
<button tabindex="0" onclick="validateDateOfBirthDropDownOnSubmit();" type="button" id="btn-biq-submit">Continue</button>
</div><!-- /submit button -->

あなたが私に与えることができる指針を前もって感謝します。

*提供された両方の回答を試みましたが、機能しませんでした。そこで、質問を編集して、使用しているJavaScriptを追加しました。css スタイルの変更を追加する場所がわからない。他のすべて (エラー メッセージと送信ボタンの無効化) は正常に動作しています。

var validateDateOfBirthDropDown = function() {
            console.log("validateDateOfBirthDropDown start");
            var allPopulated = false;
            var allValid = false;
            var onePopulated = false;
            var txtMonthPopulated = false;
            var txtDatePopulated  = false;
            var txtYearPopulated  = false;
            //console.log(" biq_dob_day val " + $('#dob-month-select').val());
            txtMonthPopulated = checkSelectPopulated($('#dob-month-select').val());
            //console.log(" biq_dob_month val " + $('#dob-dd-select').val());
            txtDatePopulated = checkSelectPopulated($('#dob-dd-select').val());
            //console.log(" biq_dob_year val " + $('#dob-yyyy-select').val());
            txtYearPopulated = checkSelectPopulated($('#dob-yyyy-select').val());
            console.log(" txtMonthPopulated val " + txtMonthPopulated + ", txtDatePopulated "+txtDatePopulated+", txtYearPopulated " +txtYearPopulated);
            if(txtMonthPopulated && txtDatePopulated && txtYearPopulated){
                    console.log("all populated");
                    allPopulated = true;
            }
            if(txtMonthPopulated || txtDatePopulated || txtYearPopulated){
                    console.log("atleast one populated");
                    onePopulated = true;
            }
            if(!txtMonthPopulated && !txtDatePopulated && !txtYearPopulated){
                    console.log("all not populated");
                    allPopulated = false;
            }
            if(allPopulated){
                    console.log("all populated");
                    //hideDateOfBirthError();
                    return true;
            }
            if(onePopulated && !allPopulated){
                    //partial error
                    console.log("partial - onePopulated && !allPopulated");
                    //showDateOfBirthError();
                    return false;
            }
            if(!allPopulated){
                    console.log("!allPopulated");
                    //hideDateOfBirthError();
                    return true;
            }
            console.log("validateDateOfBirthDropDown complete");
    }
    var checkSelectPopulated = function(valLocal){
            if(valLocal == "" || valLocal == "notselected"){
                    return false;
            }
            return true;

}

4

2 に答える 2

2

フォーム送信時にこの JavaScript コードを追加できます

<script>
function checkdate()
{
var x1=document.forms["form-name"]["dob-dd-select"].value;
var x2=document.forms["form-name"]["dob-month-select"].value;
var x3=document.forms["form-name"]["dob-yyyy-select"].value;
if !(x1==null || x1=="" || x2==null || x2=="" || x3==null || x3=="")
  {
  alert("Date must be filled out");
  return false;
  }

</script>


<form name="" id="" onsubmit="return checkdate()">
于 2013-10-30T15:52:31.920 に答える
0

質問にjQueryのタグを付けたのを見たので、次の行を回避できます。

$(function () {
    // Assuming there's just one form on the page.
    // If not, just change the selector to an appropriate one.
    $("form").on("submit", function (e) {
        // Stop form submission.
        e.preventDefault();

        // Check select values.
        var dayValid = $("#dob-dd-select").val() != "";
        var monthValid = $("#dob-month-select").val() != "";
        var yearValid = $("#dob-yyyy-select").val() != "";

        // Play with the layout
        if (!dayValid)
            $("#dob-dd-select").css("border-color", "red");

        if (!monthValid)
            $("#dob-month-select").css("border-color", "red");

        if (!yearValid)
            $("#dob-yyyy-select").css("border-color", "red");

        // Something is not right, return to the form.
        if (!dayValid || !monthValid || !yearValid)
            return false;

        // The form is valid, so submit it.
        $(this).submit();
    });
});
于 2013-10-30T16:05:42.620 に答える