How to use RequiredFieldValidator contorl when use watermark for TextBox using JavaScript in ASP.Net

Last Reply on Jun 28, 2017 03:45 AM By Indresh

Posted on Jun 28, 2017 02:09 AM

hi

I use watermark for textbox and I want if users doesn't enter any thing in textbox it will display error below are code:

<script type = "text/javascript" >
    window.onload = function SetColorOnPageLoad()
    {
        var defalutAddKaText = "آدرس را به صورت کامل و بدون نام استان یا شهر وارد نمایید.";
        functionSetColor(document.getElementById("TxtaddC"), defalutAddKaText);
    }
    function functionSetColor(Textbox, WaterMark)
    {
        if (Textbox.value.length > 0 && Textbox.value == WaterMark)
        {
            Textbox.style.color = "#b1b1b1";
        }
        else {
            Textbox.style.color = "black";
        }
    }
    function WaterMark(txt, evt, msg)
    {
        if (txt.value.length == 0 && evt.type == "blur")
        {
            txt.style.color = "#b1b1b1";
            txt.value = msg;
        }
        if (txt.value == msg && evt.type == "focus")
        {
            txt.style.color = "black";
            txt.value = "";
        }
    }
</script>
<asp:TextBox ID="TxtaddC" runat="server" CssClass="txtaddC1" Text="آدرس را به صورت کامل و بدون نام استان یا شهر وارد نمایید." onkeydown = "return isNumeric(event.keyCode);" onpaste = "return false;"
ForeColor="#b1b1b1" onblur="WaterMark(this, event,'آدرس را به صورت کامل و بدون نام استان یا شهر وارد نمایید.');" onfocus="WaterMark(this, event,'آدرس را به صورت کامل و بدون نام استان یا شهر وارد نمایید.');"></asp:TextBox>

and validate code:

<asp:RequiredFieldValidator Display="Dynamic" ID="RequiredFieldValidator5" runat="server" ControlToValidate="TxtaddC" InitialValue = "آدرس را به صورت کامل و بدون نام استان یا شهر وارد نمایید"></asp:RequiredFieldValidator>

 

                        <script type="text/javascript">
                              function WebForm_OnSubmit() {
                                  var message = document.getElementById("message");
                                  message.style.display = "none";
                                  if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
                                      for (var i in Page_Validators) {
                                          try {
                                              if (!Page_Validators[i].isvalid) {
                                                  message.style.display = "block";
                                              }
                                          } catch (e) {
                                          }
                                      } return false;
                                  } return true;
                              }
                         </script>

but here when I didn't type ant thing in textbox it doesn't show error

what should I do?

best regards

neda

Posted on Jun 28, 2017 03:45 AM Modified on on Jun 28, 2017 03:46 AM

Hi nedash,

Please refer the below code.

HTML

<form id="form1" runat="server">
<div>
    <asp:TextBox ID="TxtaddC" runat="server" CssClass="txtaddC1" Text="آدرس را به صورت کامل و بدون نام استان یا شهر وارد نمایید."
        onkeydown="return isNumeric(event.keyCode);" onpaste="return false;" ForeColor="#b1b1b1"
        onblur="WaterMark(this, event,'آدرس را به صورت کامل و بدون نام استان یا شهر وارد نمایید.');"
        onfocus="WaterMark(this, event,'آدرس را به صورت کامل و بدون نام استان یا شهر وارد نمایید.');"></asp:TextBox>
    <asp:RequiredFieldValidator Display="Dynamic" ID="RequiredFieldValidator5" runat="server"
        ControlToValidate="TxtaddC" ValidationGroup="Test" ErrorMessage="Please Enter your Search Text."
        ForeColor="Red" InitialValue="آدرس را به صورت کامل و بدون نام استان یا شهر وارد نمایید."></asp:RequiredFieldValidator>
    <asp:Button Text="Submit" ValidationGroup="Test" runat="server" />
</div>
<div>
    <script type="text/javascript">
        function WebForm_OnSubmit() {
            var message = document.getElementById("message");
            message.style.display = "none";
            if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
                for (var i in Page_Validators) {
                    try {
                        if (!Page_Validators[i].isvalid) {
                            message.style.display = "block";
                        }
                    } catch (e) {
                    }
                } return false;
            } return true;
        }
    </script>
    <script type="text/javascript">
        window.onload = function SetColorOnPageLoad() {
            var defalutAddKaText = "آدرس را به صورت کامل و بدون نام استان یا شهر وارد نمایید.";
            functionSetColor(document.getElementById("TxtaddC"), defalutAddKaText);
        }
        function functionSetColor(Textbox, WaterMark) {
            if (Textbox.value.length > 0 && Textbox.value == WaterMark) {
                Textbox.style.color = "#b1b1b1";
            }
            else {
                Textbox.style.color = "black";
            }
        }
        function WaterMark(txt, evt, msg) {
            if (txt.value.length == 0 && evt.type == "blur") {
                txt.style.color = "#b1b1b1";
                txt.value = msg;
            }
            if (txt.value == msg && evt.type == "focus") {
                txt.style.color = "black";
                txt.value = "";
            }
        }
    </script>
</div>
</form>