jQuery获取具有特定参数的子元素数量

Question

I have the following piece of code, that is being executed on submit of a form. Yet the following logic is incorrect as the intent was to develop a universal function that would work for all the forms in my DOM. After failing over and over I ended up creating this function, specific to a this form, that verifies if the values of input fields in my form are the same as their custom defVal attribute, if so the form will stop submitting and an error message will pop up.

My question consists on the following: how can i check if any child elements of my form meet specific parameters, like for example being an input field and have their .val() == .attr('defVal')?

I've already tried using .find(), .children() and .childNode functionalities. Could somebody please suggest me a good solution and if possible explain your code

HTML:

<div class="login" align="center">
<div class="formWrapper">
    <form action="index.php?r=backoffice" method="post">
        <input type="text" name="USERNAME" required value="username" defval="username" maxlength="16">
        <input type="password" name="PASSWORD" required value="password" defval="password" maxlength="16">
        <input type="reset" value="reset">
        <input type="submit" value="submit">
        <hr/>
        <a href="#" class="helpLink">Can't log in?</a>
    </form>
</div>
<div class="infoWrapper">
    <div class="info">

    </div>
</div>

jQuery:

$('div.login').ready(function(){
$('div.login form').submit(function(e){
    if( $('div.login form input').val()==$('div.login form input').attr('defVal') ){
        var numMsgs=$('div.login form').children();
        if( numMsgs.length<=6 ){
            var formHtml=$('div.login form').html();
            $('div.login form').html('<a class="sysMsg" href="#">error::invalid username/password</a>'+formHtml);
            $('div.login form a.sysMsg').addClass('errFatal').fadeIn(300).delay(5000).fadeOut(300);
        }
    e.preventDefault();
    }
});

});

Answer 1

Try (this pattern)

$(function () {
    var elems = $(".login input[defval]");
    console.log(elems.length);
    $.each(elems, function (i, el) {
        if ($(el).val() === $(el).attr("defval")) {
            // do stuff
            console.log(i, $(el).val() === $(el).attr("defval"), $(el));
        };
    });
});

jsfiddle http://jsfiddle.net/guest271314/9578v/

Answer 2

After sleeping over the subject I ended up managing to do the task. I've changed the html a bit. Anyway thank you for your suggestion as it was quite useful and actualy toaught me something.

HTML:

<div class="login" align="center">
<div class="formWrapper">
    <form action="index.php?r=backoffice" method="post">
        <p class="jQueryErr">
        <?php
            if( !empty($_POST['USERNAME']) && !empty($_POST['PASSWORD']) ){
                phpClass::USER_login($_POST['USERNAME'],'username',$_POST['PASSWORD'],'password');
            }
        ?>
        </p>
        <input type="text" name="USERNAME" value="username" defval="username" maxlength="16">
        <input type="password" name="PASSWORD" value="password" defval="password" maxlength="16">
        <input type="reset" value="reset">
        <input type="submit" value="submit">
        <hr/>
        <a href="#" class="helpLink">Can't log in?</a>
    </form>
</div>

jQuery:

$('form').submit(function(e){
    var elems=$(this).find('input[defval]');
    var errWrapper=$(this).find('p.jQueryErr');
    for( var i=0; i<elems.length; i++ ){
        if( $(elems[i]).val()==$(elems[i]).attr('defVal') ){
            $(errWrapper[0]).html('<a class="sysMsg errWarning" href="#">error:: invalid username/password</a>');
            var formSysMsg=$('p.jQueryErr a.sysMsg');
            $(formSysMsg[0]).fadeIn(300).delay(5000).fadeOut(300);
            e.preventDefault();
            break;
        }else if( $(elems[i]).val().length<8 ){
            $(errWrapper[0]).html('<a class="sysMsg errWarning" href="#">error::'+ $(elems[i]).attr('defVal') +'::is too short!</a>');
            var formSysMsg=$('p.jQueryErr a.sysMsg');
            $(formSysMsg[0]).fadeIn(300).delay(5000).fadeOut(300);
            e.preventDefault();
            break;
        }
    }
});