将 jQuery / JavaScript 代码添加到 php 文件答案

【问题标题】：Add jQuery / JavaScript code to php file将 jQuery / JavaScript 代码添加到 php 文件
【发布时间】：2018-01-03 02:38:58
【问题描述】：

我有一个网站，当用户将任何文本字段留空时，框的边框将变为红色。我用这几行代码在css中弄明白了

.input-box{
  border-color: red;
}

.input-box:focus{
  outline: none;
}

但如果字段为空，我想在我的 php 代码中实现这一点。我一直在寻找这一切，找不到解决方案。我什至尝试了 JavaScript 并达到了这一点

if(empty($fullname)){
  echo "
    <script type=\"text/javascript\">
      document.getElementByClassName('input-box').style.borderStyle = 'solid';,
      document.getElementByClassName('input-box').style.border = '';,
      document.getElementByClassName('input-box').style.borderColor = 'red';
    </script>
  ";
}

if(empty($email)){
  echo "
    <script type=\"text/javascript\">
      document.getElementByClassName('input-box').style.borderStyle = 'solid';,
      document.getElementByClassName('input-box').style.border = '';,
      document.getElementByClassName('input-box').style.borderColor = 'red';
    </script>
  ";
}

if(empty($password)){
  echo "
    <script type=\"text/javascript\">
      document.getElementByClassName('input-box').style.borderStyle = 'solid';,
      document.getElementByClassName('input-box').style.border = '';,
      document.getElementByClassName('input-box').style.borderColor = 'red';
    </script>
  ";
}

if(!empty($fullname) && !empty($email) && !empty($password)){
  echo "you're in";
}

但它不起作用。所以我要做的就是当用户将一个字段留空时，框的边框将变为红色，而轮廓将变为空。

【问题讨论】：

不，谢谢！感谢您的评论
我认为您想在文本框为空时将 css 类添加到文本框中。喜欢：if(empty($fullname)){ echo '<script>document.getElementById("{id of fullname input box}").classList.add("input-box");</script>'; } 或者使用 jQuery addClass api.jquery.com/addclass 查看 *另外，为什么不将 .input-box 更改为更具描述性的内容，例如：.input-box-err
这么多空的时候，我可以制作一个css代码并将它们组合起来，代码将在php行中运行相当多的css？
以上代码将使所有具有输入框类的文本框的边框变为红色。
我认为您应该对特定的文本框名称使用 document.getElementsByName() 方法。

标签： javascript php jquery html css

【解决方案1】：

getElementsByClassName 返回一个数组，因此您不能分配样式等属性。

这是你想要的 JavaScript：

var inputs= document.getElementsByClassName("input-box");
for(var i=0; i<inputs.length; i++) {
  inputs[i].style.borderStyle = 'solid';
  inputs[i].style.border = '';
  inputs[i].style.borderColor = 'red';
}

【讨论】：

抱歉...有些错别字
我把那个还是那个 D:
document.getElementsByName('name')[0].style.borderColor="red";

【解决方案2】：

我的代码基于 jQuery。

希望对你有帮助...

	$('#user-form').submit(function(e) {
		var name		= $('#name').val();
		var email		= $('#email').val();
		var phone		= $('#phone').val();
		var address		= $('#address').val();
		var dob			= $('#dob').val();
		if(name=="")		$('#name').addClass('input-box');	else $('#name').removeClass('input-box');
		if(email=="")		$('#email').addClass('input-box');	else $('#email').removeClass('input-box');
		if(phone=="")		$('#phone').addClass('input-box');	else $('#phone').removeClass('input-box');
		if(address=="")		$('#address').addClass('input-box');else $('#address').removeClass('input-box');
		if(dob=="")			$('#dob').addClass('input-box');	else $('#dob').removeClass('input-box');
		if((name=="")||(email=="")||(phone=="")||(address=="")||(dob==""))event.preventDefault();
		
	});

.input-box{
  border-color: red;
}

.input-box:focus{
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="user-form" action="q.php">
	<p><label>Name : </label><input type="text" id="name" name="name" /></p>
	<p><label>Email : </label><input  type="text" id="email" name="email" /></p>
	<p><label>Phone : </label><input type="text" id="phone" name="phone" /></p>
	<p><label>Address : </label><input type="text" id="address" name="address" /></p>
	<p><label>DOB : </label><input type="text" id="dob" name="dob" /></p>
	<p><button type="submit" id="submit">Submit</button></p>
</form>

【讨论】：

【解决方案3】：

虽然我不喜欢像这样将 PHP/服务器代码与前端混合，但有一个明显的错误（除非它是故意的）。由于您使用的是类输入框，因此如果任何一个字段为空，则所有字段都将标记为空。

无论如何，请尝试以下方法：

首先，空字段要申请的样式是一样的。因此，在您的 css 文件中定义一个。例如

 .needed-field {border:1px solid red;}

然后给每个字段一个唯一的 id，同时保持类输入框就位。

然后在您的 PHP 文件中做两件事：在提交表单或其他内容时从之前删除任何可能的错误字段：

     $('.input-box').removeClass('needed-field');

那么对于每一个：

     if(empty($fullname)){
    echo "
    <script type=\"text/javascript\">
           $('#fullname').addClass('needed-field');

       </script>
      ";
    }

希望对您有所帮助。

编辑：

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">


     <style>

        .needed_field {border:5px solid red;}

        </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
                 <form action="so/1.php" method="post">
                 <input type="text" id="fullname" name="fullname" class="input-box"><br/>
                 <input type="text" id="email" name="email" class="input-box"><br/>
                 <input type="text" id="password" name="password" class="input-box"><br/>

                 <input type="submit" value="Sumbit" id="submit" name="submit">

                 </form>
                 <script>
                 $('.input-box').removeClass('needed_field');
                 <?php
                if($_POST['submit']){
                    //echo '<script>'

                    //echo '</script>';

                    $fullname=$_POST['fullname'];
                    $email=$_POST['email'];
                    $pwd=$_POST['pwd'];

                    if(empty($fullname)){
                        echo "$('#fullname').addClass('needed_field');";
                    }


                }
                ?>

                </script>


    </body>
</html>

【讨论】：

我加了没得到结果 D:
复制并粘贴代码到您的 .php 文件中。查看更新。当然，表单动作要调整...