jquery验证和多个选择框

时间：2012-03-22 06:31:07

标签： jquery html jquery-validate

问题是当我添加自定义复选框时，有效功能不起作用，但我在自定义复选框中包含class ='require'并且字段ID正确。自定义选择框或新添加选择框不起作用。但是当删除自定义选择框并添加新框时，一切正常

JS：

    <script>
$(document).ready(function() {
   $('.remove').click(function(){
        $(this).parent().remove();
    });

    $("#add").click(function() {
        var intId = $("#configField div").length + 1;
        var label = $("<label>Field Name:</label>");
        var labelType = $("<label>Field Type:</label>");
        var labelReq = $("<label>Require:</label>");
        var labelTag = $("<label>Tag:</label>");
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"RName[]\" class=\"required\" />");
        var fTag = $("<input type=\"text\" name=\"Tag[]\" class=\"required\" />");
      **This is the require second select box**  var **fReq** = $("<select class=\"required\" name=\"Req[]\" ><option value=\"\">Please Select</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
        var fType = $("<select class=\"required\" name=\"RType[]\"  ><option value=\"\">Please Select</option><option value=\"txt\">Text</option><option value=\"int\">Numbers</option><option value=\"bool\">Boolean</option></select>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });

        fieldWrapper.append('<br>');        
        fieldWrapper.append(label);
        fieldWrapper.append(fName);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelType);
        fieldWrapper.append(fType);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelReq);
        fieldWrapper.append(fReq);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelTag);
        fieldWrapper.append(fTag);
        fieldWrapper.append('<br>');
        fieldWrapper.append(removeButton);
        $("#configField").append(fieldWrapper);
    });
});

</script>

HTML              

    <?

if (isset ($_GET['id']))
{$list=$_GET['id'];
$_SESSION['editID']=$list;}
else
{$list=$_SESSION['editID'];}

    try{
$sql = '
    SELECT   *
    FROM     require_attributes
    WHERE    ListID=?
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($list));
$result= $stmt->fetchAll();
}
catch(PDOException $e)
    {
    die ($e->getMessage().'<a href="view.php"> Back</a>'); 
    }

    $counter=1;

    foreach ($result as $set) 
{
?>

<div class='fieldwrapper' id=<? echo "field".$counter ?>><br>
<label>Field Name:</label><input type='text' name='RSSName[]' class='required' value=<? echo $set['Attribute']?>><br>
<label>Field Type:</label><select class='required' name='RType[]' <?if ($set['Attribute']=='Email') echo "disabled='disabled'";?>><option value=''>Please Select</option><option value='txt' <? if ($set['Type']=='txt') echo "SELECTED";?>>Text</option><option value='int' <? if ($set['Type']=='int') echo "SELECTED";?>>Numbers</option><option value=='bool' <? if ($set['Type']=='bool') echo "SELECTED";?>>Boolean</option></select><br>
      **This is the custom select box**
<label>Require:</label><select class='required' name='Req[]' <?if ($set['Attribute']=='Email') echo "disabled='disabled'";?>><option value=''>Please Select</option><option value='1' <? if ($set['Req']=='1') echo "SELECTED";?>>Yes</option><option value='0' <? if ($set['Req']=='0') echo "SELECTED";?>>No</option></select><br>
<label>Tag:</label><input type='text' name='Tag[]' class='required' value=<? echo $set['Tag']?>>
<?if ($set['Attribute']!='Email') echo "<br><input type='button' class='remove' value='Remove'>";?></div>

<?
$counter++;
}?>


</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">


</form>

</html>

整页

<?
include("../connection/conn.php");
session_start();


if($_SERVER['REQUEST_METHOD'] == "POST"){

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


if (isset ($_GET['id']))
{$list=$_GET['id'];
$_SESSION['editID']=$list;}
else
{$list=$_SESSION['editID'];}

//For case only have email field.
if (!isset ($_POST['RType']) && !isset($_POST['Req']))
{
            try{

$sql = 'DELETE ra.* FROM require_attributes ra WHERE ListID = ?';

$stmt = $conn->prepare($sql);
$stmt->execute(array($list));
}
catch(PDOException $e)
    {
    die ($e->getMessage()."<a href='view.php' onClick='window.location.reload()'> Back</a>"); 
    }


    foreach ($_POST['Tag'] as $set) {
    $tag=$set;}

    try {
    $query="INSERT INTO require_attributes (ReqID,ListID,Attribute,Type,Req,Tag) VALUES ('',$list,'Email','txt',1,?)";
    $stmt = $conn->prepare($query);
    $stmt->execute(array($tag));

}
catch(PDOException $e)
    {
    die ($e->getMessage()."<a href='view.php' onClick='window.location.reload()'> Back</a>"); 
    } 
}   

//For case  have more than one field.
else
{
foreach ($_POST['RName'] as $input) {
    echo $input . PHP_EOL;
}
foreach ($_POST['Tag'] as $input) {
    echo $input . PHP_EOL;
}
foreach ($_POST['Req'] as $input) {
    echo $input . PHP_EOL;
}
foreach ($_POST['RType'] as $input) {
    echo $input . PHP_EOL;
}
}

?>
<div id="stylized" class="myform">
<div style="text-align:center;font-weight:bold;">You have successfully config the list. <a href='config.php'>Back</a></div>
<div class="spacer"></div>
</div>
<?
}else{?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="../plugin/jquery-1.6.1.min.js"></script>
<script src="../plugin/jquery.validate.min.js"></script>
<script src="../plugin/jquery.form.js"></script>
<link rel="stylesheet" type="text/css" href="../style/form.css" />





<!-- **********************This is validation function call**********************-->

    <script>
    $(document).ready(function(){
    $("#config").validate();
    });  
    </script>



    <script>
    $(document).ready(function() {
       $('.remove').click(function(){
            $(this).parent().remove();
        });

        $("#add").click(function() {
            var intId = $("#configField div").length + 1;
            var label = $("<label>Field Name:</label>");
            var labelType = $("<label>Field Type:</label>");
            var labelReq = $("<label>Require:</label>");
            var labelTag = $("<label>Tag:</label>");
            var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
            var fName = $("<input type=\"text\" name=\"RName[]\" class=\"required\" />");
            var fTag = $("<input type=\"text\" name=\"Tag[]\" class=\"required\" />");
            var fReq = $("<select  class=\"required\" name=\"Req[]\" ><option selected=\"\" value=\"\">Please Select</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
            var fType = $("<select  class=\"required\" name=\"RType[]\"  ><option selected=\"\" value=\"\">Please Select</option><option value=\"txt\">Text</option><option value=\"int\">Numbers</option><option value=\"bool\">Boolean</option></select>");
            var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
            removeButton.click(function() {
                $(this).parent().remove();
            });

            fieldWrapper.append('<br>');        
            fieldWrapper.append(label);
            fieldWrapper.append(fName);
            fieldWrapper.append('<br>');
            fieldWrapper.append(labelType);
            fieldWrapper.append(fType);
            fieldWrapper.append('<br>');
            fieldWrapper.append(labelReq);
            fieldWrapper.append(fReq);
            fieldWrapper.append('<br>');
            fieldWrapper.append(labelTag);
            fieldWrapper.append(fTag);
            fieldWrapper.append('<br>');
            fieldWrapper.append(removeButton);
            $("#configField").append(fieldWrapper);
        });
    });

    </script>



    </head>
    <body>

    <form id="config" method="post" action="config.php" >
    <fieldset id="configField">

        <?

    if (isset ($_GET['id']))
    {$list=$_GET['id'];
    $_SESSION['editID']=$list;}
    else
    {$list=$_SESSION['editID'];}

        try{
    $sql = '
        SELECT   *
        FROM     require_attributes
        WHERE    ListID=?
    ';
    $stmt = $conn->prepare($sql);
    $stmt->execute(array($list));
    $result= $stmt->fetchAll();
    }
    catch(PDOException $e)
        {
        die ($e->getMessage().'<a href="view.php"> Back</a>'); 
        }

        $counter=1;

        foreach ($result as $set) 
    {
    ?>
    <div class='fieldwrapper' id=<? echo "field".$counter ?>><br>
    <label>Field Name:</label><input type='text' name='RName[]' class='required' value=<? echo $set['Attribute']?>><br>
    <label>Field Type:</label><select class='required' name='RType[]' <?if ($set['Attribute']=='Email') echo "disabled='disabled'";?>><option selected="" value="">Please Select</option><option value='txt' <? if ($set['Type']=='txt') echo "SELECTED";?>>Text</option><option value='int' <? if ($set['Type']=='int') echo "SELECTED";?>>Numbers</option><option value=='bool' <? if ($set['Type']=='bool') echo "SELECTED";?>>Boolean</option></select><br>
    <label>Require:</label><select class='required' name='Req[]' <?if ($set['Attribute']=='Email') echo "disabled='disabled'";?>><option selected="" value="">Please Select</option><option value='1' <? if ($set['Req']=='1') echo "SELECTED";?>>Yes</option><option value='0' <? if ($set['Req']=='0') echo "SELECTED";?>>No</option></select><br>
    <label>Tag:</label><input type='text' name='Tag[]' class='required' value=<? echo $set['Tag']?>>
    <?if ($set['Attribute']!='Email') echo "<br><input type='button' class='remove' value='Remove'>";?></div>


    <?
    $counter++;
    }?>


    </fieldset>
    <input type="button" value="Add a field" class="add" id="add" />
    <input type="submit" value="Submit">


    </form>

    </html>

    <?
    }
    ?>

1 个答案:

答案 0 :(得分：1)

基本上是因为Validator似乎不支持输入数组名称。

在此处创建了一个工作示例：http://jsfiddle.net/hawat/2/

您可以通过编辑验证器插件来解决此问题，请参阅： JQuery Validation for Array of Input Elements

相关问题
最新问题