Question

我是js [客户端脚本]

的新手

我之前在php上工作现在我想我需要在我的应用程序中使用js，这里有一个很小的代码。

<form name = "Purchase" action = "purchase.php" method = "POST">
<select name = "pname">
<option value = "p1"> p1 </option>
<option value = "p2"> p2 </option>
<input type = "number" name = "price" required></input>
<input type = "number" name = "Total" required></input>
<input type = "submit" name = "NewPurchase" Value = "Add">
</form>

我想验证所有值是否已设置或不在表单中下拉如果未选中，则会显示警告消息，说明未选择该值我已修改了该值文件显示如下，但无效。

<SCRIPT LANGUAGE="JavaScript">
function validateForm(objForm)
{
    var returnStatus = 1;
    if (objForm.Make.selectedIndex == 0) 
    {
        alert("Please select a all select options");
        returnStatus = 0;
    };
    if (returnStatus) 
    {
        objForm.submit();
    }
}
</script>

修改输入提交标签

<input type = "submit" name = "NewPurchase" Value = "Add" onClick="validateForm(document.testform)">

目前我正在使用isset（）

在下一页[“purchase.php”]中使用php验证所有值

请告诉我如何在js中使用相同的内容。

Answer 1

基本上我不推荐警告（）。当然，他们很好，充满了他们的责任，但他们也几乎阻止了浏览器的其余部分。

<html>
    <head>
        <Script>
            function validateForm(e){
                var tStatus = 1;

                if (e){
                    var tE = e.parentNode; //Getting the form container.
                    var tL = document.querySelectorAll('[required]'); //Get required elements;

                    for(var i=0, j=tL.length;i<j;i++){
                        tL[i].style.backgroundColor = '#ffffff'; //Reseting our error marks.

                        if (tL[i].tagName === 'SELECT' && tL[i].selectedIndex === 0){
                            //For dropdowns, we check if not the first option is selected
                            var tStatus = 0;
                            tL[i].style.backgroundColor = 'crimson';
                            //alert('..') //Can put alerts instead, but alerts are rarely a good option
                        }
                        else if (tL[i].tagName === 'INPUT' && tL[i].type == 'number' && (tL[i].value.trim() === '' || isNaN(tL[i].value))){
                            //For number input, we check if a value is entered which is a number.
                            var tStatus = 0;
                            tL[i].style.backgroundColor = 'crimson';
                            //alert('..') //Can put alerts instead, but alerts are rarely a good option
                        }
                        else if (tL[i].tagName === 'INPUT' && tL[i].type == 'text' && tL[i].value.trim() === ''){
                            //For input, we check if any text is entered which is not only whitespaces.
                            var tStatus = 0;
                            tL[i].style.backgroundColor = 'crimson';
                            //alert('..') //Can put alerts instead, but alerts are rarely a good option
                        };
                    };
                };

                //Proceed how ever you want with your status [0|1]
                return (tStatus === 1);
            };
        </Script>
    </head>

    <body>
        <form name = "Purchase" action = "purchase.php" method = "POST">
            <select name = "pname" required>
                <option value = "p1"> p1 </option>
                <option value = "p2"> p2 </option>
            </select> <!-- Close the select? -->

            <input type = "text" name = "text" required></input>
            <input type = "number" name = "Total" required></input>
            <input type = "number" name = "Total" required></input>
            <input type = "submit" name = "NewPurchase" Value = "Add" onsubmit="return validateForm(this)">
        </form>
    </body>
</html>

Answer 2

您错过了关闭选择，因此您的选择将如下：

<select name = "pname" id="pname">
 <option value = "p1"> p1 </option>
 <option value = "p2"> p2 </option>
</select>

为每个输入字段分配ID;

删除js代码中的;

如果在你的js函数中检查它，使用document.getElementById（“id_of_input”）;

if (value==""){
       alert("fill abc field"); 
       return false;
  }

同样，检查所有这些

而不是onclick事件将事件添加到表单

 onsubmit="return  validateForm();"

最后在你的js函数中返回true，如果任何输入失败，它将返回false，因此不会提交表单。

你可以使用isset()函数，但这是没有意义的，因为你正在进行客户端验证..

你可以用户必需=“必需”，即在html5中，并且不允许用户提交表单而不在字段中添加一些值。

使用java脚本

2 个答案: