空文本框验证jQuery

nhaq1z21  于 2023-01-30  发布在  jQuery
关注(0)|答案(3)|浏览(117)

我有3个文本字段,其中的数据可以添加到一个表,但是,我可以提交数据到表,即使所有的字段都是空的,这种形式的验证可以使用普通的jQuery或必须使用插件?

zbwhf8kr

zbwhf8kr1#

您可以显式选中所有选项:

// at least one is empty
if ($('#myId_1').val() == '' || $('$myId_2').val() == '') {
    alert('Oops! Please fill them all!');
}
// all are empty
if ($('#myId_1').val() == '' && $('$myId_2').val() == '') {
    alert('Oops! Please fill at least one!');
}

或者,如果您希望在将来支持可变数量的字段,可以使用以下方法:

var invalid = false;
$('#table tr input:text').each(function() {
    if ($(this).val() == '') {
        invalid = true;
        return false;
    }
});

if (invalid)
    alert('Fill all the fields please!');

Here's a working example.

3zwtqj6y

3zwtqj6y2#

你可以用jQuery来完成这个任务,而不需要使用任何额外的插件。这个脚本就可以完成这个任务。注意,它会遍历你所有的文本字段。我还为用户添加了一个视觉确认(绿色边框== OK,红色边框== 'not OK')。
希望你能用得上。

$('#yourSubmitButtonId').click(function(){
    var isValid = 1;
    $('input:text').each(function(){
        if($(this).val() == ''){
            $(this).css('border','1px solid red');
            isValid = 0;
            }
        else{
            $(this).css('border','1px solid green');
            }
        });

    if(isValid == 0){
        alert('Please enter content to all text fields');
        return false;
        }

    //if valid then do something
    });
zaqlnxep

zaqlnxep3#

“如果任何框为空,我希望收到警报,而不希望调用函数”AddScore“”
那么,我们开始吧。你只需要找出填充的输入数是否小于输入总数。所以,稍微修改一下你的函数如下:

function AddScore() {
    var totalInputs = $('div[data-role="fieldcontain"] input:text').length;
    var nonEmptyInputs = $('div[data-role="fieldcontain"] input:text').filter(function(){return $.trim($(this).val()) !== ""}).length;
    if (nonEmptyInputs < totalInputs) {
        alert ("You've not filled all the boxes");
        return; //stop execution
    }
    //rest of the code
    var jqTableBody = $('#myTable tbody');
    ....
    ....

相关问题