How to Pass the Email Id value after checking Captcha in Asp.Net Mvc4?

Question

I am new one to Asp.Net Mvc4 with Entity Framework. Now i am doing Captcha verification for Forgot Password. As my code, I it is passing the Email id value to Controller when i am clicking submit button even the Captcha code is Invalid. I want to pass the Email id value to controller if the Captcha code is correct otherwise it should show the validation error and New captcha should get reloaded. Please help me to fix it. Thanks in advance.

This is my Java Script code for generation and validating the captcha:

var captchastring = '';
        function getCaptcha() {
            var chars = "0Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0Kk1Ll2Mm3Nn4Oo5Pp6Qq7Rr8Ss9Tt0Uu1Vv2Ww3Xx4Yy5Zz";
            var string_length = 7;
            captchastring = '';
            for (var i = 0; i < string_length; i++) {
                var rnum = Math.floor(Math.random() * chars.length);
                captchastring += chars.substring(rnum, rnum + 1);
            }
            document.getElementById("randomfield").innerHTML = captchastring;
        }

        function validation() {
            var text2 = document.getElementById("txtcode").value;
            if (text2 == captchastring) {

                var email = document.getElementById("UserEmail").value;

                x = document.getElementById("demo");
                // Find the element

                x.innerHTML = "valid";
                x.style.color = "#ff0000";

            }
            else {

                x = document.getElementById("demo");  // Find the element
                x.innerHTML = "Invalid Captcha. Try again";
                x.style.color = "#ff0000";
            }
        }

     </script>

This is my body of my cshtml code:

<div class="col-md-5">
                    @using (Html.BeginForm())
                    {        
                                    @Html.ValidationSummary(true)    
                    <h5 class="nomargin">Forgot Password</h5>

                         @Html.TextBoxFor(u => u.UserEmail, new { @class = "form-control", placeholder = "Email" })
                        <br />
                        <div id="captcha">
                            <div id="captcha_gen">
                                <label id="randomfield">
                                </label>
                            </div>
                            <button type="button" onclick="getCaptcha();" style="border: 0; background: transparent;float:right; position:relative";>
                                <img src="../../Content/FSLBootstrapUI/images/playback_reload.png" width="25" height="25" alt="submit" />
                                     </button>
                        </div>

                        <input type="text" id="txtcode"  class="form-control" placeholder="Enter code here" />

                        <button class="btn btn-success btn-block" value="submit" onclick="validation()">Reset</button> <p id="demo"> </p>  


                    }
                </div>

Answer 1

What is happening currently? I mean, how is the application behaving? EDIT: You can try server side validation for example if you have a field to validate you can add a validation tag there.For example:

<input type="text" name="SampleTextBox" id="SampleTextBoxId"/>
 @Html.ValidationMessage("SampleTextBox", "*")

Then you go to the controller and add this kind of code:

if (!string.IsNullOrEmpty(SampleTextBox))
{
//Your Code.
}
  else
{
  ViewData.ModelState.AddModelError("SampleTextBoxId", "Text should not be empty.");
}

Use Model.IsValid as your condition to write your main code. Model.IsValid becomes False if ViewData.ModelState.AddModelError("SampleTextBoxId", "Text should not be empty."); is executed. This is a way to add validations. You can check for your valid/invalid captcha in your controller itself and throw error. For Example:

if (IsValidCaptcha(enteredCaptcha))
{
//Code
}
else
{
ViewData.ModelState.AddModelError("captchaId", "Enter valid captcha");
}

Lastly, add a validation summary to your page

@Html.ValidationSummary("Error Messages")