양식 유효성 검사

Question

JavaScript의 새로운 기능입니다.나는 5 개의 열이있는 양식을 검증하고 싶습니다.

formdescription

내 양식에는 5 개의 입력 필드가 포함되어 있고 하나의 제출 buttom

다음과 같이 출력

1.Initially Disabled 버튼을 제출합니다.

2. 모든 필드 입력 버튼이 활성화됩니다.

또는 else

1. 경고 상자를 재생하십시오. "모든 필드는 입력해야합니다"

고맙습니다.

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

Answer 2

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>