0

jQuery と JavaScript を使用してボタンをクリックした後、フォームの入力値を検証しようとしています。

現在、入力に値を入力して送信をクリックすると、入力フィールドとボタンが消えます。ここで何が間違っているのか分かりますか？

HTMLファイル...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
            <form>
                <input type="text" id='input_1'>
                <input type="submit" value="Send" id="send">
            </form>   
    </body>
</html>

スクリプトファイルは...

$(document).ready(function() {
    $('.send').click(function() {
        validateInput(document.getElementById('#input_1'));
        function validateInput(inputValue){
             if (inputValue === 3) {
             alert("Element cannot be equal to 3");
             }
        }
    });
});
4

3 に答える 3

1 
$(document).ready(function() {
    $('#send').live('click',function() { //Because send is the id of your button
        if(validateInput(document.getElementById('#input_1'))){
            alert("Element cannot be equal to 3");
            return false;
         }
         else{
             //Do something else
         }
        function validateInput(inputValue){
             if (inputValue == 3) {
             return false;//Will prevent further actions
             }
        }
    });
});
于 2013-05-06T15:10:49.033 に答える
0

ご回答ありがとうございます。残念ながら、あなたの推奨事項を使用して動作させることができませんでした。アラートを使用する代わりに、jQuery を使用して要素を取得し、メッセージを div に追加することにしました。これは別のアプローチでしたが、最終的には機能しました。

HTML...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
            <form>
                <input type="text" name="input"/>

            </form>
            <button id="send">Send</button>
            <div class="error">
            </div>
    </body>
</html>

脚本...

$(document).ready(function() {
    $('#send').click(function(){ 
    var toValidate = $('input[name=input]').val();
    if (toValidate == 3) {
    jQuery('.message').html('');
        $('.error').append('<div class="message">' + toValidate + " is    invalid" + '</div>');
    }
    else {
        jQuery('.message').html('');
        $('.error').append('<div class="message">' + toValidate + " is valid" + '</div>');
         }

    });
});
于 2013-05-06T19:25:54.800 に答える