This is a migrated thread and some comments may be shown as answers.

Wizard step and Custom Validation

1 Answer 261 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
Liu
Top achievements
Rank 1
Liu asked on 26 Nov 2016, 09:58 AM

Hi 

I use RadWizard and create 10 WizardStep, each step content 10 textbox and 10 Custom Validation.

I use client function to validate these textbox, like below , the code will help me to find which textbox are repeated.

My question is when step 2 textbox value and step 1 textbox value repeated, the validator fired. I wish each step just only have it validator, each step will not interference each other. How Can I do ?

  <script type="text/javascript">
        function validateTxt(sender, args) {
            var txts = new Array();
            args.IsValid = true;
            txts = document.getElementsByTagName('input')  
            var valus = new Array();
            for (i = 0; i < txts.length; i++) {  
                if (txts[i].type == 'text') { 
                    if (isNaN(txts[i].value)) {
                        args.IsValid = false;
                        break;
                    } else {  
                        for (j = 0; j < valus.length ; j++) {
                            if (valus[j] == txts[i].value.trim()) {  
                                args.IsValid = false;
                                break;
                            }
                        }
                        if (txts[i].value.trim() != '') {   
                            valus[valus.length] = txts[i].value.trim();
                        }
                    }
                }
                if (args.IsValid == false) {
                    break;
                }
            }
        }
    </script>

 

part of server side code 

        protected void Page_Load(object sender, EventArgs e)
        {
           
            NumberOfGroup = tas.Get_Group_Emp("7", "1").Rows.Count;
            QuestionNumber = tas.Get_Question_By_Group("1", "1", "7").Rows.Count;
            Question = tas.Get_Question_By_Group("1", "1", "7");
            //重點是,每一個 RadWizardStep 要有自己的 ValidationGroup Name,WizardStep 底下的元素的 Validation Group 名稱要與上層相同
            if (!Page.IsPostBack)
            {

                RadWizard wizard = new RadWizard() { ID = "Wizard1", Skin = "Sunset" ,EnableAjaxSkinRendering=true, RenderMode=RenderMode.Mobile };
                
                wizard.Culture = new System.Globalization.CultureInfo("zh-TW");
                wizard.Localization.Next = "下一題";
                wizard.Localization.Previous = "上一題";
                wizard.Localization.Finish = "完成";
                wizard.WizardStepCreated += RadWizard1_WizardStepCreated;
                wizard.FinishButtonClick += Wizard_FinishButtonClick;

                RadWizardStep startStep = new RadWizardStep() { ID = "startStep", StepType = RadWizardStepType.Start, Title="評量開始" };
                string term1 = "正向思考且有生產力的員工能讓公司充滿幹勁。<br/>個人、團隊及經理的定期績效評估 – 可讓您及時瞭解公司主幹健全與否。<br/> 由人力資源部 進行的員工調查問卷,可讓管理階層蒐集提升業務最需要的意見反應。<br/> 焦點員工評核可讓管理階層及其工作小組,展開關於職涯發展與目標的深度對話。<br/>";
                startStep.Controls.Add(new Literal() { Text = "<div id='term1' class='EULA'>"+term1+"</div>" });
                wizard.WizardSteps.Add(startStep);
                // 依據 QuestionNumber 來決定迴圈大小,一個步驟一題
                for (int i = 0; i < QuestionNumber; i++)
                {
                    //這邊長題目
                    RadWizardStep step = new RadWizardStep() { ID = "step" + (i + 1).ToString(), Title = "問題" + (i + 1).ToString(), ToolTip = "問題" + (i + 1).ToString(), CausesValidation = true, ValidationGroup = "group" + (i + 1).ToString(), StepType = RadWizardStepType.Step };
                    step.Controls.Add(new Literal() { Text = "<div id='question' style='margin:0 auto;font-family: 'cwTeXFangSong', serif;'>" });
                    step.Controls.Add(QuestionLabel=new RadLabel() { });
                    step.Controls.Add(new Literal() { Text = "</div>" });
                    //這邊長照片 依據 Group 人數
                   
                        step.Controls.Add(new Literal() { Text = "<div style='margin:0 auto; position: relative; width: 950px ;text-align:center;border:1px solid red;'>" });

                        for (int j = 0; j < NumberOfGroup; j++)
                        {
                            step.Controls.Add(new Literal() { Text= "<div class='HeadPicture'>" });
                            RadBinaryImage image = new RadBinaryImage() { ID = "RadImage" + (i + 1).ToString() + (j + 1).ToString(), ImageUrl = "/img/2_"+(j+1).ToString()+".png", CssClass = "ImageCSS" , ToolTip="Your Name..User "+(j+1).ToString()};
                            step.Controls.Add(image);

                            //TextBox textbox = new TextBox() { ID = "TextBox" + (i + 1).ToString() + (j + 1).ToString(), ValidationGroup = "group" + (i + 1).ToString(), CssClass = "TextBoxCSS" };
                            //step.Controls.Add(textbox);
                            RadNumericTextBox RadNumbericText = new RadNumericTextBox() { ID = "RadNumericText" + (i + 1).ToString() + (j + 1).ToString(), ValidationGroup = "group" + (i + 1).ToString(), ShowSpinButtons = true, ButtonsPosition = InputButtonsPosition.Left, MaxValue = NumberOfGroup, MinValue = 1, Type = NumericType.Number, CssClass = "TextBoxCSS", RenderMode = RenderMode.Classic };
                            RadNumbericText.NumberFormat.DecimalDigits = 0;
                            RadNumbericText.IncrementSettings.InterceptArrowKeys = true;
                            RadNumbericText.IncrementSettings.InterceptMouseWheel = true;
                            RadNumbericText.IncrementSettings.Step = 1;
                            RadNumbericText.ForeColor = System.Drawing.Color.DarkGreen;
                            RadNumbericText.Font.Bold = true;
                            step.Controls.Add(RadNumbericText);

                            //RequiredFieldValidator ReqValidator = new RequiredFieldValidator() { ID = "validator" + (i + 1).ToString() + (j + 1).ToString(), ValidationGroup = "group" + (i + 1).ToString(), ControlToValidate = RadNumbericText.ID, ErrorMessage = "*", ForeColor = System.Drawing.Color.Red, EnableClientScript = true };
                            //step.Controls.Add(ReqValidator);

                              CustomValidator cValidator = new CustomValidator() { ID = "cValidator" + (i + 1).ToString() + (j + 1).ToString(), ValidationGroup = "group" + (i + 1).ToString(), ClientValidationFunction = "validateTxt",Display=ValidatorDisplay.Dynamic, ErrorMessage = "*", ValidateEmptyText = true, ForeColor = System.Drawing.Color.BlueViolet, EnableClientScript = true };
                            //  ValidationSummary vSummary = new ValidationSummary() { ID = "vSummary" + (i + 1).ToString()+(j+1).ToString(), ValidationGroup = "group" + (i + 1).ToString(), ShowMessageBox = true, DisplayMode = ValidationSummaryDisplayMode.List };
                              step.Controls.Add(cValidator);
                            //  step.Controls.Add(vSummary);
                            //    //剩下換頁換步驟時,CustomValidator 必須重新綁定的問題,不然前後頁的值會互相比對,只希望比單頁的就好


                            step.Controls.Add(new Literal() { Text="</div>" });
                        }
                        step.Controls.Add(new Literal() { Text = "</div></br>" });
                    wizard.Controls.Add(step);
                }

                RadWizardStep finalStep = new RadWizardStep() { ID = "finalStep", StepType = RadWizardStepType.Finish, Title="評量結束" };
                string term2 = "謝謝你的參與";
                finalStep.Controls.Add(new Literal() { Text = "<div id='term1' class='EULA'>" + term2 + "</div>" });
                wizard.WizardSteps.Add(finalStep);
                this.Form.Controls.Add(wizard);
            }
        }

        private void Wizard_ActiveStepChanged(object sender, EventArgs e)
        {
            
        }

        private void Wizard_FinishButtonClick(object sender, WizardEventArgs e)
        {
            // 關閉瀏覽器...
            Response.Write("<script language='javascript'>window.open('', '_self', ''); window.close();</script>");
        }

        protected void RadWizard1_WizardStepCreated(object sender, WizardStepCreatedEventArgs e)
        {
            // 這裡載入題目
            if (!(e.RadWizardStep.ID == "startStep" || e.RadWizardStep.ID == "finalStep"))
            {
                //RadLabel QuestionLabel = new RadLabel();
                QuestionLabel.Text = Question.Rows[Convert.ToInt32(e.RadWizardStep.Index-1)]["Question"].ToString() + "(1 ~ " + NumberOfGroup +" 分)";
                QuestionLabel.CssClass = "LabelFont";
            }
        }

 

 

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 30 Nov 2016, 12:37 PM
Hi,

You may refer to the RadWizard Validation demo, which shows how validation is done for components in the active step only. You may browse its code and scripts used via the demo Code Viewer. In addition, you may refer to the RadWizard Validation help article.

Regards,
Dimitar
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Tags
Wizard
Asked by
Liu
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or