0

2 つの DIV に分割されたフォームを作成しました。ユーザーが [次へ] ボタンをクリックすると、次の 2 つのことを行います。1. 最初の DIV のテキスト フィールドを検証し、成功した場合。2. 最初の DIV を非表示にし、2 番目の DIV をフェードインします (検証が失敗した場合、メッセージを表示し、フォームの 2 番目の部分が表示されないようにします)。

コードを削除しました。これは、現在、画像ボタンをクリックしたときに最初の DIV を非表示にするスクリプトです。このスクリプトを変更してフィールドの検証を実行する方法がわからないため、最初の DIV が非表示になり、2 番目の DIV が表示されなくなります。

<script>
  $(document).ready(function(){
    $("img.nextlink").click(function (event) {
    $("#partone").hide();
    $("#parttwo").fadeIn("slow");
  });    
</script>

フォームは次のとおりです。

<form action="mail.php" method="post" enctype="multipart/form-data" name="registration">

<div id="partone">
Name:* <input type="text" name="customer_name" id="customer_name" />
<img src="images/arrow.png" id="arrow" class="nextlink" alt="next">
</div>    

<div id="parttwo">
Address*: <input type="text" name="address" id="address" />
<INPUT TYPE="image" src="images/arrow.png" alt="Submit">
</div>

</form>

CSS:

div#partone {   
}
div#parttwo {
    display: none;
}
4

2 に答える 2

0

あはは！はい。次のように機能します。

function validateFirstPart() {
  if($('#customer_name').val().length < 1){
    alert("Too short customer name");
    return false;
  }
  if($('#ranch').val().length < 1){
    alert("Too short ranch name");
    return false;
  }
  return true;
}


$(document).ready(function(){
    $("img.nextlink").click(function (event) {
        if(validateFirstPart()){
            $("#partone").hide();
            $("#parttwo").fadeIn("slow");
        }
});
于 2013-04-23T02:18:05.633 に答える