1

So I have this account creation form for a company. Here's what it looks like: enter image description here

I am going to explain first how a feature in this system works.

  1. After company creation, a table will be shown, listing all the companies I created.

  2. In the Action column of this table, there's an action button that once I click it, I will be logged in into a specific company I chose, acting as the user logged inside that company.

  3. Inside, there's more like the same layout and I can create a sub-company called "Operator".

  4. So there's a "Create Operator" button and once clicked, I will be redirected to the same form layout above (except that the "Company Name" label is changed to "Operator Name").

  5. Alright, so I am using Yii2 php framework and basically, each input field is an attribute in a db table and in my model, there's a function called public function attributeLabels() where each of these attributes are assigned to a specific label.

  6. For example, first input field's db table attribute name is company_name so inside this function it is assigned as company_name => "Company Name" and this label is passed to the view which is this form. So whenever there are error messages, this label is used.

  7. Regardless if I am creating a company or operator, the error message is always "Company Name should not be blank". What I need to accomplish is when I create an operator, the error message should be "Operator Name should not be blank."

I hope you get my problem. So I tweaked some javascript/jQuery but I am still having problems.

// For changing Operator Name error message            
var operatorNameLabel = $('.field-company-company_name label').attr('for','company-company_name').text();
var companyNameErrorDiv = $(".field-company-company_name p");
var operatorNameMsg = 'Operator Name should not be blank.';

$('#submit-button').click(function() {
    // Change Operator Name error message
    if (operatorNameLabel == "Operator Name") {
        companyNameErrorDiv.html("<p class='help-block help-block-error'>Operator Name should not be blank</p>");
        //companyNameErrorDiv.text(operatorNameMsg);
    }
});

$('#content-offset').click(function () { 
    if (operatorNameLabel == "Operator Name") {
        companyNameErrorDiv.html("<p class='help-block help-block-error'>Operator Name should not be blank</p>");
        //companyNameErrorDiv.text(operatorNameMsg);
    }
});

My problem in my current code is that :

  1. when I leave the operator name input field blank then click into a blank space outside the input field, the error message is still "Company Name should not be blank."

  2. but then when I click back to the input field, that's the time the error message changes to "Operator Name should not be blank."

  3. What really happens is that when I click at the operator name input field, then single click outside or at any other input fields, the error message remains "Company Name should not be blank.",

  4. but when I do a second click, the the error message changes.

  5. There's a problem when I click back to the operator name input field for it keeps on getting back to the "Company Name should not be blank" error message, when clicked.

I hope you get my problem.

EDIT: Yii2 generated html looks like this:

<div class="form-group field-company-company_name required has-error">
    <label class="col-lg-2 control-label name-label" for="company-company_name" data-name="Operator Name">Operator Name</label>
    <div class="col-lg-3">
        <input type="text" id="company-company_name" class="form-control" name="Company[company_name]" required="required">
    </div>
    <div class="col-lg-7">
        <p class="help-block help-block-error">Company Name cannot be blank.</p>
    </div>
</div>

1 Answer 1

2

Try adding required attribute to input element, data-* at label element; css :invalid, :after pseudo element, content property of label to display message when input is invalid.

input:invalid + label:after {
  content: " " attr(data-name) " should not be blank";
  color: red;
}
<input type="text" name="company_name" required /><label data-name="Company Name"></label><br>
<input type="text" name="login_name" required /><label data-name="Login Name"></label><br>
<input type="email" name="email" required /><label data-name="Email"></label><br>
<input type="password" name="password" required /><label data-name="Password"></label><br>
<input type="password" name="password_confirm" required /><label data-name="Password Confirm"></label>

Sign up to request clarification or add additional context in comments.

7 Comments

Thanks. I tried but not working, maybe because my label element comes before input element. Does that matter?
Yes, try with <input> element preceding <label> element, see Adjacent Sibling Selector
I cannot alter the arrangement since the form is generated by Yii automatically. Here's what it looks like: i.imgur.com/w87RLtH.png
Can you include generated html at Question ?
"I cannot alter the arrangement since the form is generated by Yii automatically." jQuery at Question alters arrangement by setting .html() at ".field-company-company_name p" element ? Though, note, ".field-company-company_name p" selects p element, then appends a a p child element to original selector at companyNameErrorDiv.html("<p class='help-block help-block-error'>Operator Name should not be blank</p>") ?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.