javascript - 使用 javascript 添加行时无法使用表单验证-6ren

javascript - 使用 javascript 添加行时无法使用表单验证

转载作者：行者123 更新时间：2023-11-30 16:39:44

我正在尝试提交 Laravel 表单

我使用一个按钮使用 javascript 添加动态行。代码是

<input type="button" value="Add Particular" onClick="addRow('dataTable')"/>

Laravel 表单:

<table class="table" id="dataTable">
<tr>
<td>
    <label for="Fee Category" > Fee Category * </label>
    <select name='CategoryID[]' rows='5' class='CategoryID' code='{$CategoryID}' 
                            class='select2 '  requred  ></select> 
</td>
<td>
    <label for="Amount">Amount *</label>
    {{ Form::text('amount[]', $row['amount'],array('class'=>'form-control', 'placeholder'=>'', 'required'=>'true', 'parsley-type'=>'number'   )) }} 

</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
</tr>

添加和删除行的 Javascript 函数:

        function addRow(tableID)
    {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        if(rowCount<5)
        {
            var row = table.insertRow (rowCount);
            var colCount = table.rows[0].cells.length;
            for(var i=0;i<colCount; i++)
            {
                var newcell = row.insertCell(i);
                newcell.innerHTML= table.rows[0].cells[i].innerHTML;
            }
        }
        else
        {
            alert("Max Reached")
        }
    }

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

我无法对新添加的行使用 Laravel 表单验证错误结果。它在硬编码表单行上工作正常。请帮忙

另外我怎样才能保持最少的一行。当前删除按钮删除所有行

最佳答案

您可以在每个字段上添加一个 onchange 事件，即使是在动态字段中，它们会在更改时将验证器称为 sson，以便用户立即知道它是否是有效入口。

我匆忙写了这段代码，应用了颜色示例，也应用了新行示例，也添加了删除，也应用了焦点上的空框以及所有其他问题。

<html>
<head>
<script type="text/javascript">

/**
A dynamic name is assigned to a new field created.
*/ 
var id=0;
var dbq="\"";

/************************* addRow function end ******************************************/
 function addRow(count)
 { 
 /**
 Decide what fieldset is going to host the row
 */
    var myFieldset='fieldset2';
    var section='2';
    if(count==4){
        myFieldset='fieldset1';
        var organisationID = id++;
        var positionID = id++;
       var section=''
        }  
 /**
    Create ids
 */
    divID = id++;
    nameID = id++;
    emailID = id++;  
 /**
    The row will be hosted in a div
 */
    var myDiv = document.createElement("div"); 
         myDiv.setAttribute("id", divID);  
 /**
    Create the text boxes
 */
    myDivInnerHTML=
    '<input type=text name=name'+section+'[]'+' value=Name id='+nameID+
    ' onFocus='+dbq+'emptyTheBox('+nameID+');'+dbq+ 
    ' onkeyup='+dbq+'changeInputColor('+nameID+');'+dbq+ 
    ' onBlur='+dbq+'fieldValidator('+nameID+');'+dbq+
    ' style='+dbq+'color:#66634F;'+dbq+' >'+   

    '<input type=text name=email'+section+'[]'+' value=Email id='+emailID+
    ' onFocus='+dbq+'emptyTheBox('+emailID+');'+dbq+
    ' onkeyup='+dbq+'changeInputColor('+emailID+');'+dbq+    
    ' onBlur='+dbq+'fieldValidator('+emailID+');'+dbq+  
    ' style='+dbq+'color:#66634F;'+dbq+'>' ;
 /**
    Decide if we need 4 or 2 boxes
 */
    if(count==4)
    myDivInnerHTML=myDivInnerHTML+
    '<input type=text name=organisation'+section+'[]'+' value=Organisation id='+organisationID+
    ' onFocus='+dbq+'emptyTheBox('+organisationID+');'+dbq+
    ' onkeyup='+dbq+'changeInputColor('+organisationID+');'+dbq+ 
    ' onBlur='+dbq+'fieldValidator('+organisationID+');'+dbq+  
    ' style='+dbq+'color:#66634F;'+dbq+' >'+   

    '<input type=text name=position'+section+'[]'+' value=Position id='+positionID+
    ' onFocus='+dbq+'emptyTheBox('+positionID+');'+dbq+
    ' onkeyup='+dbq+'changeInputColor('+positionID+');'+dbq+ 
    ' onBlur='+dbq+'fieldValidator('+positionID+');'+dbq+ 
    ' style='+dbq+'color:#66634F'+dbq+'>' ;
 /**
    Create a button to remove the row too.
 */
    myDivInnerHTML=myDivInnerHTML+
    '<input type=button class="remove" value="Remove"  onClick='+dbq+'removeDiv('+divID+','+ myFieldset +');'+dbq+' >';   
 /**
    Add the div-row to the fieldset
 */
    myDiv.innerHTML = myDivInnerHTML; 
    document.getElementById(myFieldset).appendChild(myDiv);      
 }
/************************* addRow function end ******************************************/

 /**
    Change the color of the text being entered
 */
function changeInputColor(caller){   
    document.getElementById(caller).style.color = 'black';
}

 /**
    Remove a row on demand
 */
function removeDiv(divID, myFieldset){ 
    myFieldset.removeChild(document.getElementById(divID)); 
}

 /**
    Empty the box on initial click
 */
function emptyTheBox(caller)
{
    var val=document.getElementById(caller).value;
    if(val=='Name' || val=='Email' || val=='Organisation' || val=='Position'  ) 
        document.getElementById(caller).value='';  
 }
/**
    Display a message
 */
 function echo(message)
 {
        document.getElementById('message').innerHTML="<h3>"+message+"</h3>";   
 }


/**********************Validates a single field, return false on fail************************/
function fieldValidator(caller)
 {  
    var error='';
    /** 
        Identify the field (if it is email, name etc) by getting the first character
        which is always the same,also get its value and full name
    */  
    var currentFieldCategory = document.getElementById(caller).name.charAt(0);
    var currentFieldValue = document.getElementById(caller).value; 
    var currentField = document.getElementById(caller);

    /** 
        Check for empty value
    */
     if(currentFieldValue == '')
     {
        echo('Please fill the data!');currentField.focus(); 
        return 'Please fill the data!';
     }  
    /** 
        Check if default value left behind  
    */  
    if(currentFieldValue.toLowerCase()=="name" || currentFieldValue.toLowerCase()
    =="email" || currentFieldValue.toLowerCase()=="organisation" ||
    currentFieldValue.toLowerCase()=="position" )  
    { 
        echo('Please check you entry, default data left behind!');currentField.focus();   
        return 'Please check you entry, default data left behind!';
    }    
    /** 
        Validate the NAME field
    */   
    if(currentFieldCategory=='n')
    {
        if(currentFieldValue.match(/^[ |'|-]/)||!(/^[a-zA-Z- ']*$/.test(currentFieldValue))
            || currentFieldValue.length<4 || currentFieldValue.length>70)  
        {
            echo('Non valid name found!');currentField.focus();   
            return 'Non valid name found!';
        }//inner if
    }//outer if
    /** 
        Validate a non empty EMAIL name field
    */  
    if(currentFieldCategory=='e')
    {
        var atpos=currentFieldValue.indexOf("@");
        var dotpos=currentFieldValue.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=currentFieldValue.length) 
        {
            echo('Non valid email found!');currentField.focus();   
            return 'Non valid email found!';
        }//inner if 
    }//outer if
    /** 
        Validate a non empty ORGANIZATION name field
    */  
    if(currentFieldCategory=='o')
    {
        if(currentFieldValue.length<2 || currentFieldValue.length>50)
        {
            echo('Use at least 2 letters and less than 50 for your organisation.'); 
            currentField.focus();           
            return 'Use at least 2 letters and less than 50 for your organisation.';        
        }//inner if  
    }//outer if 
    /** 
        Validate a non empty POSITON name field
    */  
    if(currentFieldCategory=='p')
    {
        if(currentFieldValue.length<7 || currentFieldValue.length>40)
        {
            echo('Use at least 7 letters and less than 40 to describe your position.');
            currentField.focus(); 
            return 'Use at least 7 letters and less than 40 to describe your position.';            
        }//inner if 
    }//outer if     
    /** 
        Now on success do the rest
    */  
    document.getElementById(caller).style.backgroundColor = '#FF9900';  
    document.getElementById('message').innerHTML="";
    return true;
 }
 /*****************fieldValidator ***function ends*****************************************/



/*******************************************************************************************/
function finalValidator()
{
    /**
        Get the form object
    */  
    var myForm=document.getElementById('booking').elements;
    /**
        Check if the form has no rows, for now 3 indicates no rows,
        BE CAREFULL it might change if more buttons added,
        just alert the length to see.
    */  
    if(myForm.length==3)
        return false; 
    /**
        Iterate through the form for all fields
    */  
    for(var i = 0; i < myForm.length; i++)
        {   
            //If it is a text field validate it
            if(myForm[i].type=='text')
            {
                var validation = fieldValidator(myForm[i].id);
                if(validation!==true)
                {
                    echo (validation);
                    return false;//prevent submit
                }//validation if
            }//field type if 
        }//for loop   
}//function
/*******************************************************************************************/


</script> 

</head>
<body bgcolor=gray>

<div id="add-buttons"><span class="add" onclick="addRow(4);"><input type="button" class="button" value="Add Waged Person"></span><span class="add" onclick="addRow(2);"><input type="button" class="button" value="Add Unwaged Person"></span></div>


<div id="message"  ></div>
<div id="form-wrap">
<form method="post" name="booking" id="booking" action="bookingengine.php">
    <fieldset id="fieldset1">
        <div class="subtitle">Waged/Organisation Rate</div>
    </fieldset> 

    <fieldset  id="fieldset2">
        <div class="subtitle">Unwaged Rate</div>
    </fieldset>

   <!-- return finalValidator will allow submit only if fields are validated-->
    <p><input type="submit" name="submit" id="submit"  onClick="return finalValidator();" 
     value="Submit booking" class="submit-button" /></p>
</form> 


</body>
</html>

添加了验证。阵列和颜色的东西有点琐碎，你应该在这里展示你自己做了什么努力。只有看到某人的意志才能参与才有趣。

关于javascript - 使用 javascript 添加行时无法使用表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32187994/

文章推荐： javascript - $scope.$watch 函数未按预期触发 nodelist.length 更改

java - 无法 Autowiring
我通过 spring ioc 编写了一些 Rest 应用程序。但我无法解决这个问题。这是我的异常(exception): org.springframework.beans.factory.BeanC
java - 无法@Autowire配置
我对 TestNG、Spring 框架等完全陌生，我正在尝试使用注释 @Value通过 @Configuration 访问配置文件注释。我在这里想要实现的目标是让控制台从配置文件中写出“hi”，通过
无法 malloc 然后转到程序顶部
为此工作了几个小时。我完全被难住了。这是 CS113 的实验室。如果用户在程序(二进制计算器)结束时选择继续，我们需要使用 goto 语句来到达程序的顶部。但是，我们还需要释放所有分配的内存。
无法 avformat_open_input .mp3
我正在尝试使用 ffmpeg 库构建一个小的 C 程序。但是我什至无法使用 avformat_open_input() 打开音频文件设置检查错误代码的函数后，我得到以下输出: Error code:
java - 无法 Autowiring
使用 Spring Initializer 创建一个简单的 Spring boot。我只在可用选项下选择 DevTools。创建项目后，无需对其进行任何更改，即可正常运行程序。现在，当我尝试在项目
macos - 无法 brew 链接qt
所以我只是在 Mac OS X 中通过 brew 安装了 qt。但是它无法链接它。当我尝试运行 brew link qt 或 brew link --overwrite qt 我得到以下信息: ton
git - 无法 pull 或提交
我在提交和 pull 时遇到了问题:在提交的 IDE 中，我看到: warning not all local changes may be shown due to an error: unable
gcc - 无法 grep 特定格式的文本
我跑 man gcc | grep "-L" 我明白了 Usage: grep [OPTION]... PATTERN [FILE]... Try `grep --help' for more inf
curl - 无法 CURL 远程文件
我有一段代码，旨在接收任何 URL 并将其从网络上撕下来。到目前为止，它运行良好，直到有人给了它这个 URL: http://www.aspensurgical.com/static/images/a
WireGuard - 无法 ping 服务器或解析域
在过去的 5 个小时里，我一直在尝试在我的服务器上设置 WireGuard，但在完成所有设置后，我无法 ping IP 或解析域。下面是服务器配置 [Interface] Address = 10.
GitLab:无法 fork 我自己的项目
我正在尝试在 GitLab 中 fork 我的一个私有(private)项目，但是当我按下 fork 按钮时，我会收到以下信息: No available namespaces to fork the
javascript - 无法 GET/定义路由
我这里遇到了一些问题。我是 node.js 和 Rest API 的新手，但我正在尝试自学。我制作了 REST API，使用 MongoDB 与我的数据库进行通信，我使用 Postman 来测试我的路
javascript - 无法 AppendChild - 尝试使一个方法在不同的类中附加另一个方法
下面的代码在控制台中给出以下消息: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child el
javascript - 数组被视为对象，无法 NgFor
我正在尝试调用一个新端点来显示数据，我意识到在上一组有效的数据中，它在数据周围用一对额外的“[]”括号进行控制台，我认为这就是问题是，而新端点不会以我使用数据的方式产生它! 这是 NgFor 失败的原
git - 无法 checkout 到无效路径
我正在尝试将我的 Symfony2 应用程序部署到我的 Azure Web 应用程序，但遇到了一些麻烦。推送到远程时，我在终端中收到以下消息 remote: Updating branch 'mas
docker - Minikube具有IP-无法 curl
Minikube已启动并正在运行，没有任何错误，但是我无法 curl IP。我在这里遵循:https://docs.traefik.io/user-guide/kubernetes/，似乎没有提到关闭
linux - 无法 docker 组成任何项目
每当我尝试docker组成任何项目时，都会出现以下错误。我尝试过有和没有sudo 我在这台机器上只有这个问题。我可以在Mac和Amazon WorkSpace上运行相同的容器。 (myslabs)
python - 无法 pip 安装手电筒
我正在尝试 pip install stanza 并收到此消息: ERROR: No matching distribution found for torch>=1.3.0 (from stanza
kubernetes 无法 ping 通其他服务
DNS 解析看起来不错，但我无法 ping 我的服务。可能是什么原因？来自集群中的另一个 Pod: $ ping backend PING backend.default.svc.cluster.l
spring - 无法 Autowiring 字段
我正在使用Hibernate 4 + Spring MVC 4当我开始 Apache Tomcat Server 8我收到此错误: Error creating bean with name 'wel

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 javascript 添加行时无法使用表单验证