demo20230512/Views/Partial/Management/CreateSupplier.cshtml

<div class="survey_form" ng-style="{height: (Survey_Height + 2) * 28 + 24 + 'px'}" style="padding: 0 16px;">
    <form name="form" style="position: relative; margin: 0 auto;" novalidate>
        <div class="add_survey_body">
            <div class="add_survey_header_title"></div>

            <div class="survey_info">
                <div class="title">
                    @Resource.StaticLabelSupplierInfo
                </div>

                <div class="survey_content">
                    <div class="row">
                        <div class="row">
                            <div>
                                <span style="width: 200px;">@Resource.UserAccountName</span>
                                <div style="width: 557px; float: right;">
                                    <input type="text"
                                           name="username"
                                           placeholder="@Resource.RequiredMessage"
                                           required 
                                           ng-blur="usernameBlur(supplier.UserName)"
                                           ng-model="supplier.UserName" />
                                </div>
                            </div>
                            <div class="validation_block">
                                <small ng-show="form.name.$dirty && form.name.$error.required">@Resource.RequiredMessage</small>
                            </div>
                        </div>

                        <div>
                            <span style="width: 200px;">Vendor Code</span>
                            <div style="width: 557px; float: right;">
                                <input type="text"
                                       name="name"
                                       placeholder="@Resource.RequiredMessage"
                                       required
                                       ng-model="supplier.VendorCode" />
                            </div>
                        </div>
                        <div class="validation_block">
                            <small ng-show="form.name.$dirty && form.name.$error.required">@Resource.RequiredMessage</small>
                        </div>
                    </div>
                    <div class="row">
                        <div>
                            <span style="width: 200px;">@Resource.SupplierName</span>
                            <div style="width: 557px; float: right;">
                                <input type="text"
                                       name="name"
                                       placeholder="@Resource.RequiredMessage"
                                       required
                                       ng-model="supplier.Name" />
                            </div>
                        </div>
                        <div class="validation_block">
                            <small ng-show="form.name.$dirty && form.name.$error.required">@Resource.RequiredMessage</small>
                        </div>
                    </div>

                    <div class="row">
                        <div>
                            <span style="width: 200px;">@Resource.StaticLabelAddress</span>
                            <div style="width: 557px; float: right;">
                                <input type="text"
                                       name="address"
                                       placeholder="@Resource.RequiredMessage"
                                       required
                                       ng-model="supplier.Address" />
                            </div>
                        </div>
                        <div class="validation_block">
                            <small ng-show="form.address.$dirty && form.address.$error.required">@Resource.RequiredMessage</small>
                        </div>
                    </div>

                    <div class="row">
                        <div>
                            <span style="width: 200px;">@Resource.PhoneNumber</span>
                            <div style="width: 557px; float: right;">
                                <input type="text"
                                       name="phoneNumber"
                                       placeholder="@Resource.RequiredMessage"
                                       required
                                       ng-pattern="/[\d]{0,3}[\-]?[\d]{0,3}[\d]+[\-]?[\d]+[\-]?[\d]+/" title="test"
                                       ng-model="supplier.Phone" />
                            </div>
                        </div>
                        <div class="validation_block">
                            <small ng-show="form.phoneNumber.$dirty && form.phoneNumber.$error.required">@Resource.RequiredMessage</small>
                            <small ng-show="form.phoneNumber.$dirty && form.phoneNumber.$error.pattern">@Resource.PhoneValidateMsg</small>
                        </div>
                    </div>

                    <div class="row">
                        <div>
                            <span style="width: 200px;">@Resource.StaticLabelContactName</span>
                            <div style="width: 557px; float: right;">
                                <input type="text"
                                       name="contactName"
                                       placeholder="@Resource.RequiredMessage"
                                       required
                                       ng-model="supplier.ContactName" />
                            </div>
                        </div>
                        <div class="validation_block">
                            <small ng-show="form.contactName.$dirty && form.contactName.$error.required">@Resource.RequiredMessage</small>
                        </div>
                    </div>

                    <div class="row">
                        <div>
                            <span style="width: 200px;">@Resource.StaticLabelContactEmail</span>
                            <div style="width: 557px; float: right;">
                                <input type="email"
                                       name="contactEmail"
                                       placeholder="contact@example.com"
                                       required
                                       ng-model="supplier.ContactEmail" />
                            </div>
                        </div>
                        <div class="validation_block">
                            <small ng-show="form.contactEmail.$dirty && form.contactEmail.$error.required">@Resource.RequiredMessage</small>
                            <small ng-show="form.contactEmail.$dirty && form.contactEmail.$error.email">@Resource.EmailValidateMsg</small>
                        </div>
                    </div>

                    <div class="row">
                        <div>
                            <span style="width: 200px;">@Resource.StaticLabelContactPhone</span>
                            <div style="width: 557px; float: right;">
                                <input type="text"
                                       name="contactPhone"
                                       placeholder="@Resource.RequiredMessage"
                                       required
                                       ng-pattern="/[\d]{0,3}[\-]?[\d]{0,3}[\d]+[\-]?[\d]+[\-]?[\d]+/"
                                       ng-model="supplier.ContactPhone" />
                            </div>
                        </div>
                        <div class="validation_block">
                            <small ng-show="form.contactPhone.$dirty && form.contactPhone.$error.required">@Resource.RequiredMessage</small>
                            <small ng-show="form.contactPhone.$dirty && form.contactPhone.$error.pattern">@Resource.PhoneValidateMsg</small>
                        </div>
                    </div>

                    <div class="row">
                        <div>
                            <span style="width: 200px;">@Resource.StaticLabelGlobal_Description</span>
                            <div style="width: 557px; float: right;">
                                <input type="text"
                                       name="description"
                                       ng-model="supplier.Description" />
                            </div>
                        </div>
                        <div class="validation_block"></div>
                    </div>

                </div>
            </div>

            <div class="survey_info survey_btn_wrap">
                <div class="survey_content">
                    <div class="row">
                        <button class="header_button" style="float: left; margin-left: 16px;" ng-click="createSupplier()" ng-disabled="form.$invalid">
                            @Resource.StaticLabelGlobal_Save
                        </button>
                        <a class="header_button" style="margin-left: 16px;" href="#Management/Index/supplier">
                            @Resource.StaticLabelGlobal_Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>