-
10-12-2019 - |
문제
JavaScript의 새로운 기능입니다.나는 5 개의 열이있는 양식을 검증하고 싶습니다.
formdescription
내 양식에는 5 개의 입력 필드가 포함되어 있고 하나의 제출 buttom
다음과 같이 출력
1.Initially Disabled 버튼을 제출합니다.
2. 모든 필드 입력 버튼이 활성화됩니다.
또는 else
1. 경고 상자를 재생하십시오. "모든 필드는 입력해야합니다"
고맙습니다.
해결책
If it is SharePoint List form, you can simply make the fields as Required and SharePoint will handle it...
But if its some other form, which I think it is... you can use JavaScript like this:
<script type="text/javascript">
function onSubmitValidation() {
if (TrimAll(document.getElementById("field1").value) == "") {
alert('All fields are must be enter');
return false;
}
if (TrimAll(document.getElementById("field2").value) == "") {
alert('All fields are must be enter');
return false;
}
// check for rest of the fields - field3, field4, field5
return true;
}
function TrimAll(s) {
var l = 0; var r = s.length - 1;
while (l < s.length && s[l] == ' ')
{ l++; }
while (r > l && s[r] == ' ')
{ r -= 1; }
return s.substring(l, r + 1);
}
</script>
HTML can look like:
Fields <input type="text" id="field1" /><input type="text" id="field2" /><input type="text" id="field3" /><input type="text" id="field4" /><input type="text" id="field5" />
<asp:Button ID="btnSubmit" Text="Submit" OnClientClick="onSubmitValidation" OnClick="btnSubmit_Click" />
However if you want to utilize input fields in Server-Side code then replace <input
with <asp:TextBox
Javascript change:
Replace document.getElementById("field1").value
with document.getElementById("<%= field1.ClientID %>").value
HTML change:
Replace <input type="text" id="field1" />
with <asp:TextBox ID="field1" runat="server"
/>
다른 팁
function button_action(){
if(!document.myform.field1.value)
{
alert("enter fields1");
document.myform.field1.focus();
return false;
}
if(!document.myform.field2.value)
{
alert("enter fields2");
document.myform.field2.focus();
return false;
}
if(!document.myform.field3.value)
{
alert("enter fields3");
document.myform.field3.focus();
return false;
}
if(!document.myform.field4.value)
{
alert("enter fields4");
document.myform.field4.focus();
return false;
}
if(!document.myform.field5.value)
{
alert("enter fields5");
document.myform.field5.focus();
return false;
}
alert("congrats");
}
<form name="myform">
<input type="text" name="field1" size="10" />
<input type="text" name="field2" size="10" />
<input type="text" name="field3" size="10" />
<input type="text" name="field4" size="10" />
<input type="text" name="field5" size="10" />
<input type="button" value="submit" onclick="button_action()" />
</form>