Asp – How to validate fields when using the asp.net wizard control

asp.netvalidation

I have a wizard control in my asp.net 2.0 project, and it contains a few steps. The second step has a textbox with a standard requiredfieldvalidator control attached to it. When the user clicks Next and the box is empty, the validator complains, all is normal.

However, when the user uses the sidebar steps to skip to the next-to-last step, and clicks Finish, the validator is not fired, and the textbox is empty. In my backend, I have this:

    Protected Sub wizard_FinishButtonClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) Handles wizard.FinishButtonClick
        If Page.IsValid Then
            ...
        Else
            lblError.Text = "You missed some fields, please return and enter them"
            e.Cancel = True
        End If
    End Sub

(lblError is a label on the complete page, but that's not really the issue)

This code does not work…

What is a good solution to this problem? Remove the sidebar and just not use it? Hardly the nicest solution…

Best Answer

It's far from perfect, but I'm now using this as an answer:

    Protected Sub wzrdAddEvent_SideBarButtonClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) Handles wzrdAddEvent.SideBarButtonClick
        If e.NextStepIndex > (e.CurrentStepIndex + 1) Then
            e.Cancel = True
        End If
    End Sub

"if using the sidebar steps, only allow one step forward at the most"

Related Solutions

Javascript – How to validate an email address in JavaScript

Using regular expressions is probably the best way. You can see a bunch of tests here (taken from chromium)

function validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

Here's the example of regular expresion that accepts unicode:

const re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

But keep in mind that one should not rely only upon JavaScript validation. JavaScript can easily be disabled. This should be validated on the server side as well.

Here's an example of the above in action:

function validateEmail(email) {
  const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

function validate() {
  const $result = $("#result");
  const email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid :)");
    $result.css("color", "green");
  } else {
    $result.text(email + " is not valid :(");
    $result.css("color", "red");
  }
  return false;
}

$("#email").on("input", validate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for=email>Enter an email address:</label>
<input id="email">
<h2 id="result"></h2>

Regex – How to validate phone numbers using regex

Better option... just strip all non-digit characters on input (except 'x' and leading '+' signs), taking care because of the British tendency to write numbers in the non-standard form +44 (0) ... when asked to use the international prefix (in that specific case, you should discard the (0) entirely).

Then, you end up with values like:

 12345678901
 12345678901x1234
 345678901x1234
 12344678901
 12345678901
 12345678901
 12345678901
 +4112345678
 +441234567890

Then when you display, reformat to your hearts content. e.g.

  1 (234) 567-8901
  1 (234) 567-8901 x1234

Best Answer

Related Solutions

Javascript – How to validate an email address in JavaScript

Regex – How to validate phone numbers using regex

Related Topic