Question

我有一个选择选项框，当我选择它时，会出现一个div输入。问题是，当我对这个div输入进行验证时，即使它隐藏时提交，它也需要我验证它，从而给我错误信息。

如果只显示输入字段，该如何启用此输入字段的验证？

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验证

//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

首先，您需要在隐藏输入时禁用该输入，以防止将其数据发送到服务器：

npm install --save @angular/cli@1.6.4

您需要在验证前进行检查：

在Javascript方面：

$(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();
        }
    });
});

在PHP方面：

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

Answer 2

这可能有所帮助。

JQUERY ：

中的

仅在选择others时才进行验证。

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!");
 }

仅在选择other_msg_subj时才在parameters变量中添加others参数。

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

PHP ：

中的

检查是否只存在参数

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();
}

另外（只是一个建议）你可以简化 JQUERY 代码：

show/hide为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);
    });
});

如何启用选项选项隐藏/显示div-input的验证？

2 个答案: