-2

1 つの送信ボタンで 2 つの独立した入力を設定する方法について、誰でも正しい方向に向けることができますか。

私は2つの入力要素を持っています。各要素は、異なる要素 ID を返信します。各入力は、その入力を個別に検証します。つまり、独自のエラー メッセージを表示します。

私のコードは次のようになります

<script src="{{ STATIC_URL }}js/jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
    $("#input-whatmask").click(function() {
    $("form").submit(function(){
    $(".error").hide();
    $("#input-whois").removeClass("errorinput");
    var hasError = false;
        var searchReg = /^[a-zA-Z0-9\s\/\.]+$/;
        var searchVal = $("#input-whatmask").val();

        if(searchVal == '') {
            $("#input-whatmask").addClass("errorinput");
        $("#input-whatmask").after('<span class="error">Enter an IP and mask.</span>');
            hasError = true;
        } else if(!searchReg.test(searchVal)) {
        $("#input-whatmask").addClass("errorinput");
        $("#input-whatmask").after('<span class="error">Enter valid text.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
                                else {
                                        return true;
                                }
    });
});
});
jQuery(function(){
        $("#input-whois").click(function() {
    $("form").submit(function(){
        $(".error").hide();
    $("#input-whatmask").removeClass("errorinput");
    var hasError = false;
        var searchReg = /^[a-zA-Z0-9\s\/\.]+$/;
        var searchVal = $("#input-whois").val();

        if(searchVal == '') {
            $("#input-whois").addClass("errorinput");
        $("#input-whois").after('<span class="error">Enter an IP address or domain.</span>');
            hasError = true;
        } else if(!searchReg.test(searchVal)) {
            $("#input-whois").addClass("errorinput");
        $("#input-whois").after('<span class="error">Enter valid text.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
                                else {
                                        return true;
                                }
    });
});
});


</script>

<form method="post" name="form1" action="/whatmask_output/">
{% csrf_token %}
          <div id="sectioncol" ><span class="section" >whatmask</span><input type="text" name="input-whatmask" id="input-whatmask" value="" size="20" /></div>
      <br/><br/>
      <div id="sectioncol" ><span class="section" >whois</span><input type="text" name="input-whois" id="input-whois" value="" size="20" /></div>
          <input type="submit" value="Submit" id="btn-search" />
</form>

</body>
</html>
4

1 に答える 1

0

これを試して：

$(document).ready(function(){
    var hasError = false;

    $("form").submit(function(e){
        var searchReg = /^[a-zA-Z0-9\s\/\.]+$/;

        if ($("#input-whatmask").val() != '' && $("#input-whois").val() != '')
        {
            alert('Enter only one field at a time!');
            return false;
        }

        if (hasError)
            return false;

        if ($("#input-whatmask").val() != '')
        {
            if(!searchReg.test($("#input-whatmask").val())){
                $("#input-whatmask").addClass("errorinput").after('<span class="error">Enter a valid value.</span>');
                hasError = true;
                return false;
            }
        }
        else if ($("#input-whois").val() != '')
        {
            if(!searchReg.test($("#input-whois").val())){
                $("#input-whois").addClass("errorinput").after('<span class="error">Enter a valid value.</span>');
                hasError = true;
                return false;
            }
        }
        else
        {
            alert('No values entered!');
            return false;
        }
    });

    $("#input-whatmask, #input-whois").click(function() {
        if ($(this).hasClass('errorinput'))
        {
            $(this).next().remove();
            $(this).removeClass("errorinput");
            hasError = false;
        }
    });
});

JSFiddle:こちら

于 2012-05-04T21:22:11.147 に答える