2016-07-23 138 views
0

提交表单输出警报内容我目前已经被用于警报包含窗体和隐藏的验证DIV这就是一个页​​面:动态修改与jQuery

<body> 
    <form id="1"> 
     <input id="2"> 
     <button id="submitButton" type="button">Submit</button> 
    </form> 


    <div id="alert"> 
     <span>Input is empty!</span> 
    </div> 

</body> 

在网页加载时,警报DIV是隐藏与CSS:

#alert{ 
    display: none; 
} 

有一个JS验证文件,用于检查提交时输入是否为空。这个JS文件不能改变。

如果点击提交按钮时输入的标签是空的,JS将执行一个简单的jQuery show()功能,使股利将是对用户可见:

if(isEmptyField){ 
    $('#alert').show(); 
} 

现在,我不能修改“输入是空!”字符串,但是,我想将警报消息更改为“空输入!”。

如何创建一个jQuery事件来实现这一目标?所以当我点击提交按钮时,我会看到“空输入!”而不是“输入是空的!”?

回答

0

如果您可以修改原来的JS文件,只需更改行这样:

$('#submitButton').click(function() { 
    if (isEmptyField) { 
     $('#alert span').text("Empty input!").show(); 
    } 
}); 

否则,您可以更改跨度的文本文档时加载:

$(document).ready(function() { 
    $('#alert span').text("Empty input!"); 
}); 
+0

将这项工作?已经有一个JS文件做到这一点。这会覆盖当前的吗? – OPK

+0

@JasonZ如果你可以编辑原始的js文件,然后用它替换它。确保“isEmptyField”变量仍然有效。否则使用第二个例子。 – Polyov

0

可以使用提交表单

例如fiddle

jQuery;

$("form").submit(function(event) { 
    if ($("input").val() == "") { 
    $("span").text("Input is empty!").show(); 
    return false; 
    } 

    $("span").text("Thanks").show().fadeOut(2000); 
    event.preventDefault(); 
}); 

标记

<body> 
    <form id="1"> 
     <input id="2"> 
     <button id="submitButton" type="submit">Submit</button> 
    </form> 
    <div id="alert"> 
     <span></span> 
    </div> 
</body> 

你不需要#alert CSS了