-2

次のようなJavaScriptフォームがあります。

<form id="loginForm" name="loginForm" action="/create_session/" method="post">{% csrf_token %}
    <table border="0" cellpadding="0" cellspacing="0" id="id-form">
        <tr>
            <th valign="top"></th>
            <td>
                <div class="error_main">
                    <p style="color: #009900; font-size: 13px; font-weight: bold;"><span style="color:red;">{{ server_error }}</span> {{ connec_ok }}{{ successful }}</p>
                </div>
            </td>
            <td></td>
        </tr>
        <tr>
            <th valign="top">Session Name :</th>
            <td>
                <input id="session_name" {{ disabled }} value="{{ session_name }}" name="session_name" class="inp-form" type="text" onchange="validateSessionName()" />
            </td>
            <td id="session_error"></td>
            <td></td>
        </tr>
        <tr>
            <th valign="top">Source Server Path :</th>
            <td>
                <input id="server_path" {{ disabled }} value="{{ server_path }}" name="server_path" onchange="validatePath()" class="inp-form" type="text" />
            </td>
            <td id="path_error"><span style="color:black"><em>Eg: 10.1.1.43:/home/sachet/test_data</em></span>
            </td>
            <td></td>
        </tr>
        <tr>
            <th valign="top">Source username :</th>
            <td>
                <input id="source_username" {{ disabled }} name="source_username" class="inp-form" type="text" onchange="validateUsername()" />
            </td>
            <td id="username_error"></td>
            <td></td>
        </tr>
        <tr>
            <th valign="top">Source Password :</th>
            <td>
                <input id="source_password" {{ disabled }} name="source_password" class="inp-form" type="password" onchange="validatePassword()" />
            </td>
            <td id="password_error"></td>
            <td></td>
        </tr>
        <tr>
            <th valign="top"></th>
            <td>
                <input name="make_default" {{ disabled }} {{ checked }} type="checkbox" id="make_default" />
                <label style="font-size: 13px;" for="make_default">Make the session default</span>
            </td>
        </tr>
        <tr>
            <th>&nbsp;</th>
            <td valign="top">
                <input type="submit" name="create_session" value="Submit" id="submit" class="form-submit" />
                <input type="reset" value="Reset" class="form-reset" />
                <td></td>
        </tr>
    </table>
    <!-- end id-form -->
</form>

指定されたフォームに対して 2 種類の検証を実行したいと考えています。Make default チェックボックスを除いて、すべての入力ボックスは空であってはなりません。そして、各フィールドがこの正規表現を満たすようにしたい:

filter = /^[A-Za-z0-9]+$/;

ユーザーが値を入力せずに [送信] ボタンをクリックすると、各フィールドの右側に必要なフィールドが表示されます。また、フォームへの入力中にユーザーが入力フィールドを満たさない場合は、無効なデータを表示したいので、追加しましonchangeた。ユーザーが空のフォームを送信した場合、各フィールドに必要なフィールドを表示したい onchange の部分は既に完了しています。これが私がこれまでに持っているものです：

$(document).ready(function() {

    $("#submit").click(function(){
        var session_name    =   $("#session_name").attr("value");
        var server_path     =   $("#server_path").attr("value");
        var source_username =   $("#source_username").attr("value");
        var source_password =   $("#source_password").attr("value");

        if(session_name==''){
            document.getElementById('session_error').innerHTML="Field Required!";
            document.getElementById('submit').disabled=false;
        }
        else if(server_path==''){
            document.getElementById('path_error').innerHTML="Field Required!";
            document.getElementById('submit').disabled=false;
        }
        else if(source_username==''){
            document.getElementById('username_error').innerHTML="Field Required!";
            document.getElementById('submit').disabled=false;
        }
        else if(source_password==''){
            document.getElementById('password_error').innerHTML="Field Required!";
            document.getElementById('submit').disabled=false;
        }
        else{
            return true;
        }
    });

});
4

1 に答える 1

0

アドバイスしたい：

  • on送信イベントのバインドに使用
  • エラーを表示する関数を使用する (コードを繰り返さないため)
  • 使用しないdocument.getElementByID(jQuery を使用している)

したがって、私のコードは次のようになります。

$(document).ready(function() {

  $("form").on("submit", function(){
    var session_name    =   $("#session_name").val();
    var server_path     =   $("#server_path").val();
    var source_username =   $("#source_username").val();
    var source_password =   $("#source_password").val();

    if(session_name=='')         displayError('#session_error');
    else if(server_path=='')     displayError('#path_error');
    else if(source_username=='') displayError('#username_error');
    else if(source_password=='') displayError('#password_error');
    else                         return true;
  });

  function displayError(element){
    $(element).html("Field Required!");
    return false;
  }
});
于 2013-06-25T07:06:09.373 に答える