Question

我有一个网站，当用户将任何文本字段留空时，该框的边框将变为红色。我用这些代码行在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";
}

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

Answer 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';
}

Answer 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>

Answer 3

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

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

首先，要为空字段应用的样式是相同的。所以，在你的css文件中定义一个。 E.g。

 .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>

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

3 个答案: