Question

我有一个非常简单的问题，我目前只是编辑下面的代码，以便输入框旁边出现First Name的错误消息。这当前有效但错误消息显示在输入框下方而不是旁边。任何关于如何让错误消息出现在框旁边的建议将不胜感激。

JavaScript文件：

function checkFName() {

var Fname = document.forms["MyForm"]["Fname"].value;
if (Fname == null || Fname == "") {
    return true; 
}
}



function checkSName() {
var Sname = document.forms["MyForm"]["Sname"].value;
if (Sname == null || Sname == "") {
    return true;
}
}

function checkFLA() {
var FLA = document.forms["MyForm"]["Fline"].value;
if (FLA == null || FLA == "") {
    return true;
}
}

function checkSLA() {
var SLA = document.forms["MyForm"]["Sline"].value;
if (SLA == null || SLA == "") {
    return true;
}
}

function checkTown() {
var Town = document.forms["MyForm"]["Town"].value;
if (Town == null || Town == "") {
    return true;
}
}

function checkPcode() {
var Pcode = document.forms["MyForm"]["Pcode"].value;
if (Pcode == null || Pcode == "") {
    return true;
}
}

function checkEmail() {
var Email = document.forms["MyForm"]["Email"].value;
 atpos = Email.indexOf("@");
 dotpos = Email.lastIndexOf(".");
 if (atpos < 1 || ( dotpos - atpos < 2 ))   {
 return true;
 }    
 }



function f1() {
var bool = true;
if (checkFName(Fname)) {
var output = "First name must be entered";
document.getElementById("f4").innerHTML = output;
    bool = false;
}


if (checkSName(Sname)) {
    alert("Surname must be filled out");
    document.MyForm.Sname.focus();
    document.getElementById("Sname").style.border = '2px solid red';
bool = false;
}

    if (checkFLA(Fline)) {
    alert("First line of address must be filled out");
    document.MyForm.Fline.focus();
    document.getElementById("Fline").style.border = '2px solid red';
bool = false;
}

        if (checkSLA(Sline)) {
    alert("Second line of address must be filled out");
    document.MyForm.Sline.focus();
    document.getElementById("Sline").style.border = '2px solid red';
bool = false;
}


if (checkTown(Town)) {
    alert("Town must be filled out");
    document.MyForm.Town.focus();
    document.getElementById("Town").style.border = '2px solid red';
    bool = false;
}

if (checkPcode(Pcode)) {
    alert("Postcode must be filled out");
    document.MyForm.Pcode.focus();
    document.getElementById("Pcode").style.border = '2px solid red';
bool = false;
}

    if (checkEmail(Email)) {
    alert("This is not a valid email");
    document.MyForm.Email.focus();
    document.getElementById("Email").style.border = '2px solid red';
bool = false;
}
return bool;
}

Perl文件：

   #!/xampp/perl/bin/perl  -w

require "dbfunc.pl";
use CGI qw/:standard/;
use CGI::Carp qw(fatalsToBrowser);

print header;
print start_html("Customer Registration");

print_html_head_section();

print "<h1>Your Details</h1>\n";
print "Please Fill In Your Details Below<p>"; 

print qq!<form method="GET" name="MyForm" onsubmit="return f1()"    action="RegisterCustomerInsert.pl"><br />!;

print qq! Title: <select name="Title">  

<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select><br>!;



print qq! Firstname: <input type="text", name="Fname" , id="Fname" size=15>    <p id="f4"></p>! ;
print qq! Surname: &nbsp <input type="text", name="Sname" , id="Sname" size=15><br>! ;
print qq! First Line Of Address: <input type="text", name="Fline" , id="Fline" size=30> <br>! ;
print qq! Second Line Of Address: <input type="text", name="Sline" , id="Sline" size=30> <br>! ;
print qq! City / Town: <input type="text", name="Town" , id="Town" size=30> <br>! ;
print qq! Postcode: <input type="text", name="Pcode" , id="Pcode" size=30> <br>! ;
print qq! E-Mail: <input type="text", name="Email" , id="Email" size=15><br>! ;

 sub print_html_head_section {
 print "<head>\n";
 print "<script src='RegisterCustomerValidation.js'    type='text/javascript'></script>\n";
 print "</head>\n";
 }

print qq!<br /><input type="submit" value="Add"  style="width:50px"/>\n</form><br />!;

print end_html;

Answer 1

当您使用段落时，您会在下一行看到错误，因此不要使用para或将它们放在表中以避免格式化工作，如下所示：

 <table> 
 <tr> 
  <Td>Firstname: <input type="text", name="Fname" , id="Fname" size=15>! ;
   </td>
  <td>
 <p id="f4"></p>
 </td>
 </tr>

依旧......

Answer 2

我认为这是因为你正在使用

元素，p元素会让你的html显示下一行的内容。如果您希望在输入旁边使用span元素，则应使用span元素。

我建议你改变一下代码并将每个输入放在容器中并在里面添加一个span元素，这样就可以更容易地管理它的位置。另外，你可以创建一个更好的JS，它可以更灵活地避免使用ID，一旦你的元素改变（使用事件监听器），你检查它，如果有错误，你可以得到它的父和输入内部的输入： / p>

event.currentTarget.parentElement.getElementsByTagName('span').innerHTML = 'your text';

Answer 3

尝试将样式属性添加到ID ＆＃39; f4＆＃39; 的段落中，如下所示：

style="position:relative:float:right;Margin-left:0px;"

希望这会有所帮助!!

使用JavaScript在输入框旁边显示错误消息

3 个答案: