Question

我正在创建一个多部分表单，需要在继续显示下一部分之前验证每个部分。当我点击继续时，我想运行一个验证，触发上面部分的响应，但不是整个表单。另外，我想以一种形式使用它，以便可以将其上载到IBM表单中。我知道jQuery很强大但我不明白你是否可以将它全部包含在html中。

<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr) {
   hideLayer(currentLayer);
   document.getElementById(lyr)
  .style.visibility = 'visible';
  currentLayer = lyr;
}

function hideLayer(lyr) {
   document.getElementById(lyr).
      style.visibility = 'hidden';
}

function showValues(form) {
   var values = '';
   var len = form.length - 1; 
   //Leave off Submit Button
   for(i=0; i<len; i++) {
      if (form[i].id.indexOf("C") != -1 ||   // if statement over this         one validating visible form elements before continuing
     form[i].id.indexOf("B") != -1)
     //Skip Continue and Back Buttons
     continue;
     values += form[i].id;
     values += ': ';
     values += form[i].value;
     values += '\n';
  }
  alert(values);
   }

</script>

</head>

<body>
    <div class="container">
        <form action="javascript:void(0)" onSubmit="showValues (this)"    method="post" enctype="text/plain">

            <div id="page1" class="page" style="visibility:visible;">

            <label for="firstname">First Name</label>
            <input type="text" id="firstname" name="firstname"   placeholder="Your first name.." required>

            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>

            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>

            <label for="phone">Phone</label>
            <input type="tel" id="phone" name="phone" placeholder="Your Number.." required>

            <center><p><input class="button" type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p></center>

            </div>

            <!-- First Page Break -->
            <div id="page2" class="page">

            <label for="title">Title</label>
            <input type="text" id="title" name="title" placeholder="Your Title.." required>

            <label for="companyname">Company Name</label>
            <input type="text" id="companyname" name="companyname"   placeholder="Your Company Name.." required>
<input class="button" type="submit" value="Submit">

在继续之前需要验证的多部分表单

0 个答案: