Javascript在文本框后面显示验证消息

时间:2016-10-21 16:19:17

标签: javascript jquery

我正在尝试使用javascript验证表单。在按钮单击功能上,我调用了一个javascript函数,我在文本框后面显示了消息。单击按钮的次数相同的次数消息显示在现有验证消息的正下方。请帮我 这是我的代码:

function check() {
        var v = true;
        if ((document.getElementById('firstname').value == "")) {

            $('#firstname').after('Validation message');
            document.getElementById('firstname').style.borderColor='#DA394B';

            v = false; 

        } 
        if ((document.getElementById('lastname').value == "")) {
            $('#lastname').after('Some validation text');
            document.getElementById('lastname').style.borderColor = '#DA394B';

            v = false;
        }
        return v;
    }

4 个答案:

答案 0 :(得分:0)

假设我明白v是什么。我可能不会因为v(我讨厌一个字母的变量名......)。

试试这个:

   Private Sub Worksheet_SelectionChange(ByVal Target As Range)

   Dim LastRow As Integer
   LastRow = 10836

   If Target.Count > 1 Then Exit Sub
   If Target.Column = 1 Then

    Select Case Target.Row
       Case 1 To LastRow
           MsgBox "Changes : " & Cells(Target.Row, Target.Column + 22) & vbNewLine & " ABC Comments: " & Cells(Target.Row, Target.Column + 23) & vbNewLine & "XYZ Comments: " & Cells(Target.Row, Target.Column + 21), vbInformation, "Comments"
       Case Else:
    End Select
    End If

    End Sub

显示此工作的简单小提琴:https://jsfiddle.net/srLt7wo0/

答案 1 :(得分:0)

使用.after将按http://api.jquery.com/after/插入另一个元素 以下解决方案使用HTML中已有的单独元素来显示错误消息。如果您使用.after,则必须检查您是否尚未在HTML中添加元素

HTML

<input id="firstname" type="text"/><div id="firstnameMessage"></div>
<input id="lastname" type="text"/><div id="lastnameMessage"></div>

JS

function check() {
    $("#firstnameMessage,#lastnameMessage").text(''); // clear message, reset border color
    document.getElementById('firstname').style.borderColor='';
    document.getElementById('lastname').style.borderColor='';

    var isValid = true;
    if ((document.getElementById('firstname').value == "")) {

        $('#firstnameMessage').text('First name is required');
        document.getElementById('firstname').style.borderColor='#DA394B';

        isValid = false;
    }

    if ((document.getElementById('lastname').value == "")) {
        $('#lastnameMessage').text('Last name is required');
        document.getElementById('lastname').style.borderColor='#DA394B';

        isValid = false;
    }
    return isValid;
}

答案 2 :(得分:0)

我不确定是否理解了您的问题,但也许这可以帮助您:)

window.firstname = document.getElementById('firstname')
window.lastname = document.getElementById('lastname')
window.issue = document.getElementById('issue')

function check() {
  
  if(firstname.value == '' || lastname.value == '') {
    issue.innerHTML = 'Please, use correct credentials.'
  } else {
    issue.innerHTML = ''
  }
  
}
<input id="firstname" />
<input id="lastname" />

<button onclick="check()">
Check
</button>

<div id="issue" style="color:red;"></div>

答案 3 :(得分:0)

如果我了解你,这应该有效。

无论您点击多少次

,它都只会添加一条消息
function check() {
    var v = true;
    if ((document.getElementById('firstname').value == "")) {

        $('#message').remove()
        $('#firstname').after('<span id='message'>Validation message</span>');
        document.getElementById('firstname').style.borderColor='#DA394B';

        v = false; 

    } 
    if ((document.getElementById('lastname').value == "")) {

        $('#message').remove()
        $('#lastname').after('<span id='message'>Some validation text</span>');
        document.getElementById('lastname').style.borderColor = '#DA394B';

        v = false;
    }
    return v;
}