如何仅在选择时隐藏/显示div输入启用验证选项？

Question

I have a select option box that when I select it, a div-input appear. The problem that when I put validation on the this div-input, and when i submit even when it hide, it require me to validate it, thus giving me error msg.

How to do enable validation for this input field only when if it appear?

PHP

<div class="form-group">
 <label for="inquiry_type">Subject *: </label>
<select name="type" id="inquiry_type" class="form-control">
     <option value="0">Please Select</option>
     <option value="test1">test1</option>
   <option value="test2">test2</option>
   <option value="others">Other...</option> //div-input appear when sel
 </select>
</div>

 <div id="other_subj" class="form-group">
    <label for="other_msg_subj">Input Subject Title *: </label>
       <input type="text" id="other_msg_subj" class="form-control" name="other_msg_subj" placeholder="Enter Subject Title" required/>
</div>

JQUERY for hide/show

<script>

$(function() {
    $('#other_subj').hide();
    $('#inquiry_type').change(function(){
        if($('#inquiry_type').val() === 'others') {
            $('#other_subj').show();
        } else {
            $('#other_subj').hide();
        }
    });
});

var inquiry_other_subj = document.getElementById("other_msg_subj").value;

 ...
 } else if (!inquiry_other_subj.match(/^(?=.*[A-Za-z ]).{5,20}$/)) {

   alert("Need to enter a proper inquiry title containing only letter!"); // I want this to be active only when the div is shown

 } else {

var parameters="...+"&other_msg_subj="+inquiry_other_subj;

PHP validation

//Same for this php validation
...
else if(!preg_match ('%^[A-Za-z\.\' \-]{2,30}$%', $_POST['other_msg_subj'])){

    echo "Please enter a valid message subject title!";
    exit();

}

Answer 1

First, you need to disable the input when it's hidden to prevent sending it's data to the server:

$(function() {
    $('#other_subj').hide();
    $('#inquiry_type').change(function(){
        if($('#inquiry_type').val() === 'others') {
            $('#other_msg_subj').prop('disabled', false);
            $('#other_subj').show();
        } else {
            $('#other_msg_subj').prop('disabled', 'disabled');
            $('#other_subj').hide();
        }
    });
});

And you need to do a check before validating:

On Javascript side:

else if (
    $("#other_msg_subj").is(":visible") &&
    !inquiry_other_subj.match(/^(?=.*[A-Za-z ]).{5,20}$/)) {

On PHP side:

else if(isset($_POST['other_msg_subj']) && 
    !preg_match ('%^[A-Za-z\.\' \-]{2,30}$%', $_POST['other_msg_subj'])){

Answer 2

This may help.

in JQUERY :

Validate only if others is selected.

var inquiry_type = $('#inquiry_type').val();
else if (inquiry_type === 'others' && !inquiry_other_subj.match(/^(?=.*[A-Za-z ]).{5,20}$/)) {
   alert("Need to enter a proper inquiry title containing only letter!");
 }

Add the other_msg_subj parameter in the variable parameters only if others is selected.

var parameters = "......"; //Other parameters
if(inquiry_type == "others")
{
     parameters = parameters + "&other_msg_subj="+inquiry_other_subj;
}

in PHP :

Check if only the parameter is present

else if(!isset($_POST['other_msg_subj']) && !preg_match ('%^[A-Za-z\.\' \-]{2,30}$%', $_POST['other_msg_subj']))
{
    echo "Please enter a valid message subject title!";
    exit();
}

Also (Just a suggestion) you can simplify the JQUERY code :

show/hide as toggle(true/false) true = show(), false = hide()

$(function() {
    $('#other_subj').hide();
    $('#inquiry_type').change(function(){
        var display = $('#inquiry_type').val() === 'others';
        $('#other_subj').toggle(display);
    });
});