4

私はJqueryにかなり慣れていないので、これは単純な問題かもしれませんが、すべてのフィールドが検証されるまでフォームの送信ボタンを非表示にする方法はありますか.

検証は、「入力時」のソリューションである必要があります。基本的に、名前、姓、電子メールの 3 つのフィールドがあります。2 つの「名前」フィールドが入力され、有効な電子メール アドレスが電子メール フィールドに入力されるまで、送信ボタンを非表示のままにしておきたいです。

フォーム自体は、AJAX を使用してフォーム データをデータベースに入力します。フォームはライトボックスにあり、送信ボタンをクリックすると自動的に閉じます。

ここで例を見ることができます: http://testing.xenongroupadmin.com/whatis/pfi

「このウィンドウを閉じる」リンクは無視してください。これは便宜上のものであり、最終バージョンでは削除されます。

以下はフォームの HTML コードで、その後に JQuery/AJAX 送信コードが続きます。

<form id="registerform" action="thanks.php" method="POST">
 <ul id="inputform">
  <li>
   <label for="firstname" id="firstnamelabel">First Name</label>
   <input type="text" name="first_name" id="fname" class="registerboxes" />
  </li>
  <li>
   <label for="lastname" id="lastnamelabel">Last Name</label>
   <input type="text" name="last_name" id="lname" class="registerboxes" />
  </li>
  <li>
   <label for="email" id="emaillabel">E-mail Address</label>
   <input type="text" name="emailbox" id="email" class="registerboxes" />
  </li>
 </ul>
 <input type="submit" value="Submit" id="emailbutton" />
</form>

そしてJquery：

$(document).ready(function(){
 $("form#registerform").submit(function() {
  var fname     = $('#fname').attr('value');
  var lname     = $('#lname').attr('value');
  var email     = $('#email').attr('value');    

 $.ajax({
  type: "POST",
  url: "post.php",
  data: "fname="+ fname +"& lname="+ lname +"& email="+ email,
  success: function(){

 $('div#register-panel, div#lightbox').fadeOut(300);
   }
  });
  return false;
 });
});

ありがとう！

4

3 に答える 3

6

http://jsfiddle.net/nickaknudson/KnZaq/

$(document).ready(function() {
    $('#emailbutton').hide();
    $('input').change(function(e) {
        if ($('#fname').val() && $('#lname').val() && $('#email').val() && validateEmail($('#email').val())) {
            $('#emailbutton').show();
        }
    });
});

var validateEmail = function(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
};​

アップデート

申し訳ありませんが、そのバージョンのフィドルではバグがあった可能性があります。再試行？ http://jsfiddle.net/nickaknudson/KnZaq/3/

資力

于 2012-07-27T15:56:47.057 に答える
0

フォームデータはそれほど大きくありません。javascript側でプラグインや検証を使用する代わりに、新しいことを学びたい場合は、手動で何かを行うことができます（私は思います）。

さて、私はサーバー側で物事を検証することを好みます、これを見てください：

テスト済みで動作中：

index.htm

<html>
<head>
<title>Get more information</title>
</head>
<style>
.error {
    color: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

    $('#emailbutton').on('click', function(){
        var fname = $('#fname').val();
        var lname = $('#lname').val();
        var email = $.trim($('#email').val());

        $.post('validate.php', {fname:fname, lname:lname, email:email}, function(data){
            if(data != 1) {
                var obj = $('#' + data + '_msg');
                if(data == 'fname') {
                    obj.html('Invalid first name.').addClass('error').show().fadeOut('slow');
                } else if (data == 'lname') {
                    obj.html('Invalid last name.').addClass('error').show().fadeOut('slow');
                } else if (data == 'email') {
                    obj.html('Invalid email.').addClass('error').show().fadeOut('slow');
                }
            } else if(data == 1) {
                $('#registerform').submit();
            }
        });
    });


});
</script>
<body>
<form id="registerform" action="thanks.php" method="POST">
 <ul id="inputform">
  <li>
   <label for="firstname" id="firstnamelabel">First Name</label>
   <input type="text" name="first_name" id="fname" class="registerboxes" />
   <span id="fname_msg"></span>
  </li>
  <li>
   <label for="lastname" id="lastnamelabel">Last Name</label>
   <input type="text" name="last_name" id="lname" class="registerboxes" />
   <span id="lname_msg"></span>
  </li>
  <li>
   <label for="email" id="emaillabel">E-mail Address</label>
   <input type="text" name="emailbox" id="email" class="registerboxes" />
   <span id="email_msg"></span>
  </li>
 </ul>
 <input type="button" value="Submit" id="emailbutton" />
</form>
</body>
</html>

validate.php

<?php 
if(isset($_POST['fname']) && isset($_POST['lname']) && isset($_POST['email'])) {

    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    $email = $_POST['email'];

    if(validateInput($fname, 2, 25)) {
        if(validateInput($lname, 2, 30)) {
            if(validateEmail($email, 5, 150)) {
                print(1);
            } else {
                print('email');
            }
        } else {
            print('lname');
        }
    } else {
        print('fname');
    }
}
function validateInput($value, $minlength, $maxlength) {
    $valid = false;
    try {
        if (strlen(trim($value)) == 0) {
            $valid = false;
        } else if (strlen(trim($value)) < $minlength || strlen(trim($value)) > $maxlength) {
            $valid = false;
        } else {
            $valid = true;
        }
    } catch (exception $e) {
        /* get exception: $e->getMessage() */
        $valid = false;
    }
    return $valid;
}

function validateEmail($email, $minlength, $maxlength) {
    $valid = false;
    try {
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $valid = false;
        } else if (strlen(trim($email)) == 0) {
            $valid = false;
        } else if (strlen(trim($email)) < $minlength || strlen(trim($email)) > $maxlength) {
            $valid = false;
        } else {
            $valid = true;
        }
    } catch (exception $e) {
        /* get exception: $e->getMessage() */
        $valid = false;
    }
    return $valid;
}
?>

thanks.php

<?php 
if(isset($_POST['first_name']) && isset($_POST['last_name']) && isset($_POST['emailbox'])) {

$fname = $_POST['first_name'];
$lname = $_POST['last_name'];
$email = $_POST['emailbox'];

echo $fname.' '.$lname.' '.$email;

// Do what you need with your data at this point, don't forget to sanitize values to insert them in your DB :-)

}
?>
于 2012-07-27T16:49:29.717 に答える
0

使用している検証プラグインはわかりませんが、true/false が返されると思います。Ready ハンドラーまたは CSS で、送信ボタンの表示を「なし」に設定し、それを検証した後、JQuery の show() メソッドを使用します。何かのようなもの：

if (formIsValid) {
    $("#submitID").show();
}

別の、よりユーザーフレンドリーなオプションは、ボタンを表示するが、フォームが有効になるまでボタンを無効にしてから有効にすることです。

デイブ

于 2012-07-27T15:56:41.273 に答える