根据下拉选择要求字段

Question

I'm stuck on the last part of something I want to achieve with a form I made. When selecting a particular value from the dropdown list there will pop up 4 more name fields then the standard form. I don't know to require these optional fields. After filling the form the form will be send to an email address.

HTML:

<form id="register-form" method="post" class="form">
     <div class="col-sm-12">
        <select name="typeTicket" id="typeTicket" class="selectTicket">
            <option value="EarlyBird">Early Bird</option>
            <option value="Regular">Regular</option>
            <option value="TeamTicket">Team Ticket</option>
        </select>
    </div>

    <div class="col-sm-12">
        <input name="name" id="name" type="text" placeholder="Voor- en achternaam" required>
    </div>

    <div class="col-sm-12">
        <div id="extraNamen" style="display:none;">
            <input type="text" id="name1" name="name1" placeholder="Voor- en achternaam">
            <input type="text" id="name2" name="name2" placeholder="Voor- en achternaam">
            <input type="text" id="name3" name="name3" placeholder="Voor- en achternaam">
            <input type="text" id="name4" name="name4" placeholder="Voor- en achternaam">
        </div>
    </div>

    <div class="col-sm-12">
        <input name="email" id="email" type="email" placeholder="Email" required>
    </div>

    <div class="col-sm-12">
        <input name="organisatie" id="organisatie" type="text" placeholder="Organisatie">
    </div> 

    <div class="col-sm-12">
        <input name="functie" id="functie" type="text" placeholder="Functie">
    </div>


    <div class="col-sm-12">
        <input type="submit" value="Aanmelden" name="submit">
    </div>
    <p class="form-notification" style="display: none;">Bedankt voor de aanmelding, tot ziens op 18 juni 2015</p>


</form>

This script will collapse/expand the hidden form fields:

<script>
$('#typeTicket').on('change', function() {
    if ($(this).val() === "TeamTicket") {
        $("#extraNamen").show();
    } else {
        $("#extraNamen").hide();
    }
});
</script>

Main JS function:

// Registration Form
    RegisterForm: function () {
        $("#register-form").submit(function (e) {
            e.preventDefault();
            var typeTicket = $("#typeTicket").val(),
                name = $("#name").val(),
                name1 = $("#name1").val(),
                name2 = $("#name2").val(),
                name3 = $("#name3").val(),
                name4 = $("#name4").val(),
                email = $("#email").val(),
                organisatie = $("#organisatie").val(),
                functie = $("#functie").val(),
                dataString = '&typeTicket=' + typeTicket + '&name=' + name + '&name1=' + name1 + '&name2=' + name2 + '&name3=' + name3 + '&name4=' + name4 + '&email=' + email + '&organisatie=' + organisatie + '&functie=' + functie;

            function isValidEmail(emailAddress) {
                var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
                return pattern.test(emailAddress);
            }

            if (isValidEmail(email) && (name.length > 1)) {
                $.ajax({
                    type: "POST",
                    url: "php/process.php",
                    data: dataString,
                    success: function () {
                        $('#register-form .form-notification').fadeIn(500);
                    }
                });
            } else {
                if (!isValidEmail(email)) {
                    $('input#email').addClass('not-valid');
                } else {
                    $('input#email').removeClass('not-valid');
                }
                if (name.length === 0) {
                    $('input#name').addClass('not-valid');
                } else {
                    $('input#name').removeClass('not-valid');
                }
            }
            return false;
        });
    },

PHP:

$youremail = "Email adress hidden";

// Register Form
if ( isset($_POST['email']) && isset($_POST['name']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {

    // Detect & Prevent Header Injections
    $test = "/(content-type|bcc:|cc:|to:)/i";
    foreach ( $_POST as $key => $val ) {
        if ( preg_match( $test, $val ) ) {
            exit;
        }
    }

    // Email Format
    $body  =    "New User Registration \n\n";
    $body .=    "========== \n\n";

    $body .=    "Ticket type:  $_POST[typeTicket] \n\n";

    if($_POST[typeTicket] == "TeamTicket") {
        $body .=    "Naam:  $_POST[name] \n\n";
        $body .=    "Naam:  $_POST[name1] \n\n";
        $body .=    "Naam:  $_POST[name2] \n\n";
        $body .=    "Naam:  $_POST[name3] \n\n";
        $body .=    "Naam:  $_POST[name4] \n\n";
    } else {
        $body .=    "Naam:  $_POST[name] \n\n";
    }

    $body .=    "Organisatie:  $_POST[organisatie] \n\n";
    $body .=    "Functie:  $_POST[functie] \n\n";

    $body .=    "Email:  $_POST[email] \n\n";

    //Send email
    mail( $youremail, "New User Registration", $body, "From:" . $_POST['email'] );
}

Answer 1

How about trying this...

<script>
$('#typeTicket').on('change', function() {
    if ($(this).val() === "TeamTicket") {
        $("#extraNamen").show();
        $("#extraNamen").attr("required",true);
    } else {
        $("#extraNamen").hide();
    }
});
</script>