0

誰かがこのコードを見ることができますか。フォームで 2 つのプラグインを使用しています。1 つはフォーム フィールドを検証し、もう 1 つはフォーム フィールドのスタイルを設定します。

フォーム スタイリング コードをコメント アウトしている場合、フォーム検証はフォームを検証します。( // $('.ul').jqf1(); ) 両方のプラグインを連携させたい。

<link href="css/jqf1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqf1.english.js"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.ul').jqf1();
$("#priceform").validate({
      rules: {
    email: {
      email: true,
      required: false
    },
    wordcount: {
     required: true,
     number: true
    },
    prating: {
    number: true
    }
  }
});});
</script>


<form action="" method="post" id="priceform">

<ul class="ul">
    <li><label for="Name">Name:</label></li><br/>
    <li><input type="text" id="name" size="20" name="name" maxlength="100" style="width:250px;" /></li>
</ul>

<ul class="ul">
    <li><label for="Email">Email:</label></li><br/>
    <li><input type="text" id="email" size="20" name="email" class="required" maxlength="20" style="width:250px;"/></li>
</ul>

<ul class="ul">
    <li><label for="username">UserName: <span class="optional">(Optional)</span></label></li><br/>
    <li><input type="text" id="username" size="20" name="username" maxlength="20" style="width:250px;"/></li>
</ul>

<ul class="ul">
    <li><label for="wordcount">Paper Word Count:</label><br/><a href="#">Calculate Word Count</a></li>
    <li style="padding-left:12px;"><input type="text" id="wordcount" size="20" name="wordcount" maxlength="20" style="width:50px;"/><span class="cumpolsory">*</span></li>
    <li style="color:green"><label id="totalPrice">$1000</label></li>   
    <li><label style="font-weight: 500; font-size:10px; color: gray;" for="totalprice">(Total Price)</label></li>
</ul>

<ul class="ul">
    <li><label>Plagiarism Rating:</label><br/><a href="#">Free Assessment</a></li>
    <li style="padding-left:15px;"><input type="text" id="prating" size="20" name="prating" maxlength="20" style="width:50px;"/><label>%</label></li>
</ul>

<ul class="ul" style="border-bottom:none;">
    <li><input type="Submit" id="name" size="20" name="name" value="Reset" maxlength="20" style="font-weight:700" /></li>
    <li style="float:right;"><input type="Submit" id="name" size="20" name="name" value="Place Order" maxlength="20" style="font-weight:700" /></li>
</ul>
</form>
4

3 に答える 3

1

この URL (http://www.webreference.com/programming/javascript/jquery/form_validation/) が参考になります。

これを配置して、ページでどのように応答するかを確認できます。

< style type="text/css"> #priceform label.error { width: 250px; 表示ブロック; フロート: 左; 赤色; パディング左: 10px; } < /スタイル>

于 2010-10-15T19:41:59.530 に答える
0

エラーコードを表示するために、cssファイルに「label.error」cssコードを追加しましたか？

于 2010-10-15T19:32:32.420 に答える
0

試してください: 1. 検証の後にスタイリング呼び出しを移動します。

また

  1. 検証割り当てが行われる前にスクリプトが静かに爆発しないようにするために、スタイリング後にアラートなどのアクションを強制します。
于 2010-10-15T19:38:39.810 に答える