Question

我正在尝试让我的JS识别页面上可见的表单输入类型。我正在进行测验，当你点击“下一步”按钮时，只要上一个问题得到解答，它就会显示下一个问题。如果不是，它应该显示警报。我试图让JS识别问题所具有的输入类型，以便它可以看到是否没有选中单选按钮，如果问题是单选按钮问题。但到目前为止，它正在将所有问题都视为文本和广播问题。我不知道我做错了什么。我已经工作了好几个小时了。

这是JS小提琴：http://bitly.com/1qy5TiX

以下是代码：

 $("button").click(function() {
 if ($("input:visible [type=text]") || $("select") ) {
    console.log("this is text or select");
 }
 if ($("input:visible :radio")) {
    console.log("this is radio");
 }
 showNext();
 }); // end button click function

Answer 1

我给你写了一个非常基本的验证功能，因为你一次只能看到一个问题。您可能也想查看验证库，但这可以让您走上正确的轨道：

function isValid() {
    var $form = $('form:visible'),
        $input = $form.find('input'),
        $select = $form.find('select');

    var type = $input.length ? 'input' : ($select.length ? 'select' : 'error');

    if (type == 'error') {
        alert('invalid input type found');
        return false;
    }

    if ($form.find('input[type="radio"]').length) {
        return $form.find('input[type="radio"]:checked').length;    
    }

    var inputVal = $form.find(type).val();

    return inputVal !== null && inputVal.length;
}

您可以检查表单是否有效：

$("button").click(function () {
    console.log('form is valid: ' + isValid());
    if (!isValid()) {
        alert("Please enter a response.");
    } else {
        ...

FIDDLE

此外，您可能希望将'form:visible'替换为更具体的内容。

JavaScript / jQuery - 识别表单输入类型（即单选按钮，文本输入，下拉列表）

1 个答案: